samedi 25 avril 2015

Semantic UI Search Selection won't remain collapsed/unfocused on load


I'm using a Semantic UI Search Selection and am using a very simple implementation of .dropdown() to convert static markup into a searchable country input.

The problem is that this input automatically focuses and the menu drops down on page load. If I wait until $(window).load(), I can remove the active and visible classes from the element (and its children), but I'd rather instantiate the menu without these to begin with.

My markup looks something like the following:

$('.ui.modal').modal('show');
$('.ui.dropdown').dropdown();
<script src="http://ift.tt/1qRgvOJ"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
<link rel="stylesheet" href="http://ift.tt/1IVWnjy">
<div class="ui modal">
  <i class="close icon"></i>
  <div class="content">
    <div class="ui form">
      <div class="field">
        <label>I am a:</label>
        <select class="ui dropdown" name="homeowner_type">
          <option value="">--</option>
          <option value="Homeowner">Homeowner</option>
        </select>
      </div>

      <!-- The dropdown in question -->
      <div class="field">
        <label>Country:</label>
        <div class="ui fluid search selection dropdown">
          <input type="hidden" name="country">
          <i class="dropdown icon"></i>
          <div class="default text">Select Country</div>
          <div class="menu">
            <div class="item" data-value="us"><i class="us flag"></i>United States</div>
            <div class="item" data-value="uy"><i class="uy flag"></i>Uruguay</div>
            <div class="item" data-value="uz"><i class="uz flag"></i>Uzbekistan</div>
            <!-- additional countries -->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

There are no other instances of .dropdown() in my code. Thoughts?

EDIT: I've discovered that this is happening because the form is included within a modal. The issue doesn't occur when the form is outside of the modal.


Aucun commentaire:

Enregistrer un commentaire