Question: I'm instantiating the Chosen plugin within a Bootstrap Modal. I'm calling the Chosen plugin after I've launched the modal. 

All works as expected apart from being able to auto focus the element to allow typing without first clicking into the element. Strangely I'm getting a blue border around the element which would indicate it has focus but no keypress actually registers until I click into the object.

I only need this to work for Chrome, I'm currently running version 39.0.2171.95.

I'm following instructions from the docs:

1. <http://harvesthq.github.io/chosen/options.html#triggerable-events>

Here's the code:

```
var $modal = $('#' + modalId); // This element contains relevant modal markup along with <select> element
$modal.modal();

var $mySelect = $('#mySelectElement'); // id of the <select> element
$mySelect.chosen();
$mySelect.trigger('chosen:activate');  // This doesn't work...

```

Have also tried the following but to no avail:

```
$mySelect.trigger('chosen:open');      // This doesn't work...

```

Any pointers appreciated.

Cheers,
Lee

Answer: 
I found an answer, or a workaround at least.

When stepping through the code I noticed that the `trigger('chosen:activate')` method is called before the `$modal.modal()` has completed i.e. the modal has not yet displayed.

I simply added an asynchronous delay before calling `chosen:activate` which appears to fix it and the Chosen element can be typed into immediately:

```
// Enable chosen plugin...
var $mySelect= $('#mySelect');
$mySelect.chosen();
var enableChosen = setTimeout(function() {
    $mySelect.trigger('chosen:activate');
}, 250);

```

Anything lower than 250ms and it stops working again. I guess it's something to do with having to wait for the modal fade animation to complete.

\*\* UPDATE \*\*

Alternative and better method, hook into the `shown.bs.modal` callback for the Bootstrap modal, like so:

```
$modal.on('shown.bs.modal', function(e) {
// Enable chosen plugin...
    var $mySelect = $('#mySelect');
    $mySelect.chosen();
    $mySelect.trigger('chosen:activate');
});

```
Your code must work. Here is a simple example base on official documentation. I don't know if your are doing something more in your code that is doing your code don't work.

```
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes</title>
  <link rel="stylesheet" href="docsupport/style.css">
  <link rel="stylesheet" href="docsupport/prism.css">
  <link rel="stylesheet" href="chosen.css">
  <style type="text/css" media="all">
    /* fix rtl for demo */
    .chosen-rtl .chosen-drop { left: -9000px; }
  </style>
</head>
<body>
  <form>
    <div id="container">
      <div id="content">
        <header>
          <h1>Chosen <small>(<span id="latest-version">v1.3.0</span>)</small></h1>
        </header>

          <em>Into This</em>
          <select data-placeholder="Choose a Country..." class="chosen-select" style="width:350px;" tabindex="2">
            <option value=""></option>
            <option value="United States">United States</option>
            <option value="United Kingdom">United Kingdom</option>
            <option value="Afghanistan">Afghanistan</option>
            <option value="Aland Islands">Aland Islands</option>
            <option value="Albania">Albania</option>
            <option value="Algeria">Algeria</option>         

          </select>
        </div>
      </div>

    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
  <script src="chosen.jquery.js" type="text/javascript"></script>
  <script type="text/javascript">
   var $mySelect = $('.chosen-select');
   $mySelect.chosen();
   $mySelect.trigger('chosen:open');
  </script>
</body>

</html>

```