materialize
materialize copied to clipboard
Cursor blinking in select box input field in iphone
Add a property in this CSS file "_select.scss"
.select-wrapper input.select-dropdown{ -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; -o-user-select:none; // latest Opera versions support -webkit- user-select:none; }
For me, this did not solve the problem. The select becomes unresponsive to touch events after the first tap.
Has something to do with zooming. Adding user-scalable=0
to meta solves the issue in most cases, although trying to scroll with dropdown open messes with it still.
This solved it for me - though I am only using this form on an iPad, and have hacked it to disable zoom (since apple forced you to allow zoom for accessibility)
Thank you ~
Works for me 🎉
@tomscholz works perfectly fine for me. Both iOS and Web (tested on Safari and Chrome), so probably Android is fine as well..
Unfortunately, user-scalable=0
for me is undesirable.
I believe the issue is focus-related. On a hunch, I shoved in a origin.blur();
(I also tried activates.blur()
, which made more sense, but didn't work) into the click close handler fixes the issue that @ahmetb ends up with.
This fixes the issue where the dropdown no longer responds after first taps. In addition to the CSS changes the OP suggested, this fixes this issue for me. Also fixes @MaximBalaganskiy's scrolling with the dropdown open.
@tomscholz it works for me. Sorry to hear you iPhone is destroyed.
@tomscholz Looks like there is no PR related to @james12 fix. So I've created one. Thanks to @james12 https://github.com/Dogfalo/materialize/pull/4881
@Dogfalo @tomscholz the blinking cursor still appears in IE11 (and IE10). Please have a look... "http://materializecss.com/forms.html"
Thank you. Works for me
None of these worked for me. https://materializecss.com/select.html isn't working right either. The materialize select is selecting the wrong option.
same as @basicBrogrammer ! nothing work :-(
@denisadebeo I just replaced my selects with select2 so not an issue for me, but still needed to report the 🐞
Yeah, right now it's still not working. The bug is closed?
+1 also having this issue and have tried the things mentioned here, anyone have a proper solution or workaround ?
Yeah, same issue here. Reproducible on iPad and iPhone on Safari's browser. We decided to revert back to the native browser select as a temporary solution until this is solved. See here (bottom of the select example html).
https://materializecss.com/select.html
<label>Browser Select</label> <select class="browser-default"> <option value="" disabled selected>Choose your option</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select>
Hope some of you find this helpful as well!
A quick and dirty jQuery solution that worked for me, if you are on your knees :
$('.select-wrapper ul.select-dropdown li').off('touchend').on('touchend', function() { $(this).click(); });
any real solution on this?