materialize icon indicating copy to clipboard operation
materialize copied to clipboard

Cursor blinking in select box input field in iphone

Open james12 opened this issue 8 years ago • 18 comments

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; }

james12 avatar Oct 18 '16 07:10 james12

For me, this did not solve the problem. The select becomes unresponsive to touch events after the first tap.

ahmetb avatar Mar 06 '17 18:03 ahmetb

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.

MaximBalaganskiy avatar Mar 21 '17 00:03 MaximBalaganskiy

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 ~

PushkaCom avatar Mar 22 '17 02:03 PushkaCom

Works for me 🎉

ammichael avatar Apr 11 '17 10:04 ammichael

@tomscholz works perfectly fine for me. Both iOS and Web (tested on Safari and Chrome), so probably Android is fine as well..

ammichael avatar Apr 19 '17 17:04 ammichael

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.

coridn avatar Jun 23 '17 18:06 coridn

@tomscholz it works for me. Sorry to hear you iPhone is destroyed.

haojia321 avatar Jun 24 '17 16:06 haojia321

@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

haojia321 avatar Jun 24 '17 16:06 haojia321

@Dogfalo @tomscholz the blinking cursor still appears in IE11 (and IE10). Please have a look... "http://materializecss.com/forms.html"

pharindoko avatar Aug 06 '17 18:08 pharindoko

Thank you. Works for me

energeyes avatar Sep 25 '17 11:09 energeyes

None of these worked for me. https://materializecss.com/select.html isn't working right either. The materialize select is selecting the wrong option. materialize-css-select

basicBrogrammer avatar Nov 26 '19 11:11 basicBrogrammer

same as @basicBrogrammer ! nothing work :-(

denisadebeo avatar Dec 04 '19 09:12 denisadebeo

@denisadebeo I just replaced my selects with select2 so not an issue for me, but still needed to report the 🐞

basicBrogrammer avatar Dec 04 '19 13:12 basicBrogrammer

Yeah, right now it's still not working. The bug is closed?

mrk992 avatar Dec 26 '19 10:12 mrk992

+1 also having this issue and have tried the things mentioned here, anyone have a proper solution or workaround ?

SprouterB avatar Jan 30 '20 20:01 SprouterB

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!

legendarylion avatar Apr 22 '20 13:04 legendarylion

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(); });

CesarVonc avatar May 09 '20 15:05 CesarVonc

any real solution on this?

damn1 avatar Sep 10 '20 16:09 damn1