Filterable Widget - Select menu

[Palestinian]

Hiding (display: none) selectmenu options <option> isn't supported by Safari Mobile browser. The code in the demo below was tested on iPhone 5 v7.0.3.

Demo: http://jsfiddle.net/Palestinian/s9StB/

I made a workaround by listening to filterablebeforefilter event and disable/enable options using .prop( "disabled", true) and removed .ui-screen-hidden.

[aesculus]

Thanks for the work around but when I tried the Fiddle on my iOS 7 devices it resulted in the same behavior as the standard demo. Does the Fiddle filter on you iOS 7 devices?

[Palestinian]

@aesculus I just tested it on iOS 7 iPad/iPhone, it isn't working. I need to revise the code.

[Palestinian]

@aesculus http://jsfiddle.net/Palestinian/dzsanf1k/ works on iOS 7. The code was commented that's it.

I have added extra code to select first enabled option.

/* work around */

$("#anotherSelect").on("filterablebeforefilter", function (e, data) {
    $("option", this).prop("disabled", false);
    var select_menu = $(this);
    setTimeout(function () {
        select_menu.find(".ui-screen-hidden").prop("disabled", true).removeClass("ui-screen-hidden");
        /* select first enabled option */
        select_menu.find("option:enabled").first().prop("selected", true);
        select_menu.selectmenu("refresh");
    }, 260);
});

[aesculus]

Maybe I am missunderstanding what you wrote. I expected that the filter would reduce the number of items in the list. That is what the original filter does on non ios devices.

Is that your intent too or just to select the first item that meets the criteria?

[Palestinian]

@aesculus it's not possible to hide an option. This work around disables unwanted options.

[Ruffio]

@arschmitz What is the teams view on this one? As I read it @Palestinian wants to 'remove/hide' selectmenu options with a display: none.

[Palestinian]

@Ruffio display: none doesn't hide options of a native selectmenu in Safari mobile. Instead, I disable options instead of hiding them.

In my very first post, check the fiddle in your iDevice and then uncomment the custom code to see the difference.

[Ruffio]

@Palestinian I see your point and the fix/feature seems to work. I think the fastest way to get this implemented is if you make a PR. Then the team will review it. I only test, I can't help any further. Sorry.

[arschmitz]

@Ruffio @Palestinian This is just something thats not natively. This is really just a bad demo we should not demo something that is not actually supported while you can do disabled on them instead i'm not sure we should demo this at all. ill let others weigh in on if we should fix this by removing the demo completely or switching it to disabled.