Semantic-ui: [Dropdown] Trigger native actions on mobile

[brigand]

In addition to what already exists...

<div class="ui selection dropdown">
    <select name="gender" data-default="Gender">
        <option value="male">Male</option>
        <option value="female">Female</option>
    </select>
</div>

$('.ui.selection.dropdown').dropdown();

So, what happens if the first child is a select element?

• hide the select element
• insert the dropdown icon
• insert the default text if defined
• insert the items based on the text and value of each option
• watch for change events on the select element
• allow the dev to rebuild it at any time (e.g. if options change)

Benifits:

• great fallback for if a dev doesn't load jQuery and/or semantic.js
• works well with MVC, MVVM, server forms (Django, Rails, ASP, etc.)
• less code
• devs can decide criteria for making it turn into a SUI dropdown
  
  
  
  • if A: $('.ui.dropdown').dropdown();
  
  
  • if not A: cool, it'll just be a select element
  
  

[jlukic]

Agree completely, that this is an easier solution.

Select dropdown should probably trigger native select actions for mobile devices, which it isnt currently able of doing, and wouldnt be possible without a real select box.

Think we can move the select box up a level safely to make it even easier (developers are lazy)

<select class="ui selection dropdown" name="gender" data-default="Gender">
  <option value="male">Male</option>
  <option value="female">Female</option>
</select>

That being said i think, in the hopes of getting a release version out in a timely manner this should be tabled till early after.

[brigand]

@jlukic Here's an alternative.

All current code will work, because from our standpoint a select element or a hidden input work the same, we just set the value

If the .ui.selection.dropdown has a select element as an immediate child,

• hide it on desktop (CSS)
• on mobile we add a mobile class and change the opacity to 0

Here's an example, but I left the opacity above 0 so it's more clear.

So the CSS would be something like this:

.ui.dropdown {
    position: relative;
}

/** Default: hidden */
.ui.dropdown select {
    display: none;
}

/** when we add the mobile class it overlays the dropdown button 
    this could be a media query instead of a class selector */
.ui.dropdown select.mobile {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0.0;
    cursor: pointer;
}

[jlukic]

This is easy enough, although since we already have javascript, i think the easier solution would be to replace the hidden input with the select, and just call $select.focus();

[brigand]

@jlukic Nope. You can focus a select element (so $(':focus') will match it), but you can't open the dropdown with JavaScript.

I've scoured the Internet trying to find a method. Here's a fiddle. Here's trying to click a label that targets the select element: fiddle; which again focuses the select element, but no dropdown.

I tested on Chrome and iOS Safari.

Edit:

You can! It's just not pretty... http://jsfiddle.net/GSYwz/2/

I can't figure out how to get it to work on iOS, which is where it really counts (I don't have android to test on).

This was my iOS attempt:

$('body').on("touchstart", function () {
    var element = $("select")[0];

    if (document.createEvent) {
        var e = document.createEvent("TouchEvent");
        e.initTouchEvent("touchstart", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        worked = element.dispatchEvent(e);

        var e = document.createEvent("TouchEvent");
        e.initTouchEvent("touchend", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        worked = element.dispatchEvent(e);
    }
});

[jlukic]

This reminds me of how most file upload components work with triggering the <input type="file"> that is hidden with opacity, or copy to clipboard which still uses mofo'ing flash to get it done.

[brigand]

Haha... yeah, it's a bit hacky, but it works.

At least the Clipboard API is in the works. The others will either be ugly or hacky (notice that <select> and file inputs are also the most difficult elements to style). You can style <script> but not <select>

[jlukic]

This was decided against, select dropdowns work well on phone with velocity scrolling

[NilsJPWerner]

Could this possibly be opened again? I think that the dropdowns work on mobile, but the default ones would just be easier.

[David-Tsui]

Agree above, most of my friends consider the default ones on mobile is easier and better.

[Staphwar]

Horrible on bigger inputs. Used an semantic dropdown 18 times. I guess I got to switch back to native in order to make it work.