Materialize: Dropdown showing cursor in iphone safari

[ghost]

Please check (select) dropdown it showing cursor of input in iphone safari

[cristianfierro]

Is there a fix for this?

[minias]

The same phenomenon occurred in the iPhone 6S Chrome 51.0.2704.64.

[maechler]

This also happens in Internet Explorer 11 and earlier. The problem is that materializecss renders an input field to display the selected option's text. The dropdown gets shown when that input field is focused. As far as I know IE renders that focus cursor always above everything else. I guess the best fix would be to not use the input field to display the selected option's text.

[storm1er]

Maybe we could focusout displayed input on focusin without hiding dropdown ?

[maechler]

@storm1er That could also be a solution. But that would break the navigation by keys, that part would have to be rewritten too.

[Dogfalo]

Just checked this and it doesn't seem to be happening on iOS safari or chrome

[maechler]

@Dogfalo it does, I just verified the bug on iOS 10.3.2 and iPhone 6S. In addition it is also a problem in internet explorer. Technically the problem is not the dropdown, but the select box because there we have an input field. The issue has probably a wrong name, but the bug is real nevertheless.

[maechler]

I would suggest to position the input field off screen with position: absolute; left: -9999px; and then render the selected option to a normal div that is styled like an input field. That keeps the select box focusable using navigation by keys and also removes the blinking cursor. In addition all the focus and blur events can be kept.

[Dogfalo]

https://github.com/Dogfalo/materialize/issues/3790