title: ui-select Does Not Drop Down On Click
body: <p>Got a time-sink of a bug which is hard to solve. I'm implementing a multi-select control using <a href="https://angular-ui.github.io/ui-select/" rel="nofollow noreferrer">ui-select</a>.</p>
  
  <p>As you can see in the plunks from that site, when you click on the inputs, you are meant to get a drop-down list.</p>
  
  <p>With my attempt, I am not getting anything when I click on the input, unless I click in the list first, and then about 1cm below the list (which is where the actual <code>ul</code> is). </p>
  
  <p>Otherwise, it does work if I start typing (it filters and searches). Everything else works too - the <strong>on-select</strong> and <strong>on-remove</strong> handlers.</p>
  
  <p>I even copy and pasted the stuff in the plunk which the AngularJS UI team have on their site.</p>
  
  <pre><code>&lt;ui-select multiple ng-model="ctrl.multipleDemo.selectedPeople" theme="bootstrap" ng-disabled="ctrl.disabled" sortable="true" close-on-select="false" style="width: 800px;"&gt;
  &lt;ui-select-match placeholder="Select person..."&gt;{{$item.name}} &amp;lt;{{$item.email}}&amp;gt;&lt;/ui-select-match&gt;
  &lt;ui-select-choices repeat="person in ctrl.people | propsFilter: {name: $select.search, age: $select.search}"&gt;
    &lt;div ng-bind-html="person.name | highlight: $select.search"&gt;&lt;/div&gt;
    &lt;small&gt;
      email: {{person.email}}
      age: &lt;span ng-bind-html="''+person.age | highlight: $select.search"&gt;&lt;/span&gt;
    &lt;/small&gt;
  &lt;/ui-select-choices&gt;
  &lt;/ui-select&gt;
  </code></pre>
  
  <p>So, why do I have to click on the actual <code>ul</code>, rather than the <code>input</code> (which is how it works in the given plunks)?</p>
  
  <p>Some further info. Above I mentioned that I first have to click the <code>input</code> and then click 1cm below it. This is because the <code>ul</code> is being rendered upon the clicking of the <code>input</code>, but it is being given an opacity of 0. I found why that is happening in the select javascript code, but commenting it out did not really solve anything. It works for the very first click, but all subsequent clicks need to be 1cm below again (i.e. on the <code>ul</code>).</p>
  
  <p>At first I thought my usage of <a href="https://daneden.github.io/animate.css/" rel="nofollow noreferrer">animate</a> might be the cause, but I removed that and the issue did not resolve.</p>
  
  <p>I have prepared a <a href="http://plnkr.co/edit/tpl:CR2TtS1zz9wFGgsl5z2c?p=preview" rel="nofollow noreferrer">plunk</a> where I have identified what is different to my project. I have added a <code>debugger</code> statement at line 1455 of the <code>select.js</code> file. In the block that follows, a handler is hooked up by the <em>$animate</em> api for the <em>enter</em> event. In the plunk, the program execution follows into that handler (presumably because the event is fired). In my project, it never fires. This is that handler:</p>
  
  <pre><code>$select.$animate.on('enter', dropdown, function (elem, phase) {
  if (phase === 'close' &amp;&amp; needsCalculated) {
    calculateDropdownPosAfterAnimation();
    needsCalculated = false;
  }
  });                                         
  </code></pre>
  
  <p>Strange that it would never fire. </p>
  
  <p>Any help would be appreciated. Cheers.</p>