title: Select element closes immediately when clicked
body: <p>I've got several select elements like this in my page</p>
  
  <pre><code>&lt;div class="question_input_type_selector selector_div hide"&gt;
      &lt;select class="custom-dropdown input_type_selector"&gt;
         &lt;option value="multiple_choice" default="" selected=""&gt;Escolha Múltipla&lt;/option&gt;
         &lt;option value="scale_input"&gt;Escala&lt;/option&gt;
         &lt;option value="grid_input"&gt;Grelha de escolha múltipla&lt;/option&gt;
         &lt;option value="text"&gt;Texto&lt;/option&gt;
         &lt;option value="checkboxes"&gt;Caixas de verificação&lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>It works correctly if I don't do anything to it. But when I hide the div with <code>.hide()</code> and then show it again with <code>.show()</code>, all the select elements stop working properly. Every time I click on one of them, it opens and closes immediately and it is impossible to select an option. The only way to keep it opened is by clicking it, dragging the mouse somewhere else while holding the button down and only then releasing it.</p>
  
  <p>I have tried everything and Googled everything I could for several days and can't find a solution.
  Thanks for your help.</p>