iOS/iPadOS not showing dropdown

[jpetersonWSDA]

We've got multiple dropdowns on a single webpage, with one being a v4.0.3 image dropdown. They all work fine on desktop browsers. They all work fine on Android.
But in iOS/iPadOS, the dropdown does not show up at all, whether in Safari or in Chrome. There isn't any indication that there's a dropdown at all.

[jpetersonWSDA]

We found in dd.min.js that there's a customElements definition that's looking for Apple/iOS in the navigator. With the current iOS version and the current code there, it'll always return false and not add that customElement.
In Chrome on iOS, "CriOS" is present, but "FxiOS" is not.
In Safari on iOS, neither "CriOS" nor "FxiOS" are present.
We changed the customElements portion to this, which should add that definition at least on Chrome:

customElements.define("ms-dropdown", i, {
extends: "select"
}), window.MsDropdown = s, (navigator.vendor && navigator.vendor.indexOf("Apple") > -1) || (navigator.userAgent && (-1 == navigator.userAgent.indexOf("CriOS") || -1 == navigator.userAgent.indexOf("FxiOS"))) && s.make("select[is='ms-dropdown']")
})();

This yielded no change, the dropdown is still completely missing on iOS Chrome/Safari.

It appears that the attribute "is" isn't compatible with Internet Explorer (just tested our page on it and it returns a basic dropdown, no ms-dropdown changes present), Safari, or Safari on iOS (no mention of Chrome on iOS, but that failed as well):
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/is

There's a bug reported, with a user noting a response from Apple that they will not be implementing the "is" attribute.

I'm not enough of a web developer to understand any of the alternatives proposed in those cases. Just figured I'd share what we found.

[marghoobsuleman]

@jpetersonWSDA Thank you for highlighting it. Let me check and update you.

[JediStu]

Would be amazing to get this working on IOS, i haven't found anything even close!
Looks so nice on desktop/android... then i checked it on my daughters iPad :(

[JediStu]

Just found one of your jsfiddles which doesn't use the is="ms-dropdown" and all is good in the world again.... very nice, thanks :)

[marghoobsuleman]

@JediStu great :)

[jpetersonWSDA]

@JediStu would you mind linking the jsfiddle that you found that works? I can't seem to find it on my own.

[JediStu]

@jpetersonWSDA , no worries this is what i used (thanks @marghoobsuleman) : https://jsfiddle.net/marghoobsuleman/no7bkvsa/1/

Would love to say i understand this stuff but im VERY new to it :)
I basically removed the is="ms-dropdown" from the that you originally picked up on and then added in the script from the above jsfiddle. Hope it helps

[ferzle]

I tried to fix my problem with IOS using the ideas from above, but I guess I am not doing it correctly. Any clarifications on this? I tried putting the 2 Javascript lines from the link above near the top of dd.js, removed the "is=" part in my select and added id="tech" and it just broke it. So clearly I am not understanding something.

[ferzle]

I fixed it. Here is what I did:

1. Used dd.css and dd.js as is.
2. Removed is="ms-dropdown" from the select tag and replaced it with id="tech"
3. Added <script>let ddSelect = new MsDropdown(document.getElementById("tech")); console.log("ddSelect.selectedText ", ddSelect.selectedText);</script> in my HTML file AFTER the form that has the select.
   That was it (I think). You can replace "tech" in both places with whatever--I just used what was in the examples mentioned above.