1

I am developing a chrome extension that requires a date input in a form. The form is being displayed in a popup. Now whenever I click on the calendar, the whole popup closes instead of just the calendar. What is the best way to prevent it? Here are snapshots of my files:

manifest.json

{
    "manifest_version": 2,
    "name": "Extension Example",
    "version": "0.2",
    "background": {
        "persistent": false
    },
    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "index.html"
    },
    "permissions": [
        "tabs", 
        "http://*/*", 
        "https://*/*"
    ]
}

index.html

<!doctype html>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">

<title>Extension Sample</title>

<!-- Bootstrap itself -->
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">

<!-- Custom styles -->
<link rel="stylesheet" href="css/style.css">

<!-- Fonts -->
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Wire+One' rel='stylesheet' type='text/css'>


<body class="theme">

<!-- Main (Home) section -->
<div>
  <div class="container">
    <div class="row">
      <div class="col-md-10 col-lg-10 col-md-offset-1 col-lg-offset-1 text-center"> 
        <h3 class="tagline">Sample</h3>
        <div>
          <form method="POST">
            <div class="row col-sm-8 col-sm-offset-2">
              <input class="form-control" type="text">
              <input class="form-control" type="date">
              <input class="form-control" type="time">
              <input class="form-control" type="email">
              <br>
              <input class="form-control submit" type="submit" value="Submit">
            </div>
          </form>
        </div>
      </div> <!-- /col -->
    </div> <!-- /row -->
  </div>

</div>
<script src="libs/jquery.1.7.0.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="popup.js"></script> 


</body>
Xan
  • 74,770
  • 16
  • 179
  • 206
gsrivast
  • 141
  • 1
  • 8
  • Sounds like your problem is a duplicate of http://stackoverflow.com/a/4148839/2336725 – Teepeemm Oct 01 '14 at 00:48
  • @Teepeemm that problem is of popup getting closed when we interact with browser outside its area. This action seems logical but in my case, the popup gets closed even if I click inside it. – gsrivast Oct 01 '14 at 03:50
  • If you open the popup's console, does the popup stay open? That would seem to indicate it's the same problem. – Teepeemm Oct 01 '14 at 14:17

1 Answers1

1

This has been filed as a more general bug two years ago, and is still not solved :

https://code.google.com/p/chromium/issues/detail?id=163851

Please go there and star the issue to have people take care of it.

Ben G
  • 3,965
  • 3
  • 30
  • 34