Visibility issue with Safar and some external css libs

Hi, At first place thanks for great work.

I found issue, even if it is not directly related with this polyfill, in Safari in case where you have included some external css libs. Safari show select box under the text field, so it wasn’t look good. After some time spent on debugging and investigation I found that actually it just not hide select box like it do on jsfiddle examples for this polyfill. Fast fix, that could save time to someone with similar issue is to add this line of in css: select[hidden] { display: none; }

I hope this would be helpful to someone.

p.s. I also thought that it would be more user friendly if in Safari on click to input field show list automatically, without need to use arrows, so I adjusted code to that. If you think it is something which could be common I can make PR with my changes?

Thanks again for great work.

[zmilan]

@mfranzke I really can not say which exactly css file make issue. Front part of application is solid mess of different css libs and I wasn’t able to detect right one. I concluded that it is issue with some of libs because I used same browser to open polyfill example on jsfiddle and on our page. I also checked rendered code and everything, but I wasn’t able to find any difference. Than it hit me that it must be “hidden” attribute and once when I try it it start working correct…

About triggering of the dropdown/suggestions in focusing the input field, I decided to add it in our case since in other browser on focus you get arrow icon in right corner of field, but in Safari there isn’t any sign that you can get dropdown/suggestions. If you don’t know that it should work like that and if you not hit letter from options on list it would work totally same like regular text field. I understand your decision to stay on specs side too. I hope this help 😃

[mfranzke]

Hi @zmilan,

thanks a lot for your feedback ! And thanks as well for your compliments !

Quick question on this: What’s the external css libs that you’re including? In general I assume that this CSS should be included anyway if necessary as a fallback for IE10-, but I wouldn’t expect any problems in Safari at all, as the hidden-attribute should be supported even already in Safari and it might be a problem related to th external css libs that shouldn’t have any implication to the code of the polyfill. Let’s see.

Additionally regarding the triggering of the dropdown / suggestions in focusing the input field, this could be a valuable change to the User experience, but this is neither mentioned in the specs nor some of the already supporting browser would handle it like this. So regarding the expected functionality of a polyfill, it might add unexpected functionality, that I’d like to prevent to do.