Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Initialized select input with readonly="true" attribute displays cursor on Safari mobile (iPhone6) #2448

Open
JoannaFalkowska opened this Issue Dec 9, 2015 · 7 comments

Comments

Projects
None yet
7 participants
@JoannaFalkowska
Copy link

JoannaFalkowska commented Dec 9, 2015

The element is initialized with materialize_select function and transformed to <input> with readonly="true" attribute. When clicked on iPhone6, the text in this element can't be edited but there is displayed a cursor. I think it may be caused by readonly="true" syntax instead of readonly, readonly="" or readonly="readonly" suggested by W3C. Is there any reason other than readability to choose readonly="true" above any of them?

@TyrionGraphiste

This comment has been minimized.

Copy link
Contributor

TyrionGraphiste commented Dec 29, 2015

Hi, I did the change in my PR to write readonly="readonly" .
Hope it fixes the bug.

@Dogfalo

This comment has been minimized.

Copy link
Owner

Dogfalo commented Dec 29, 2015

The problem isn't the readonly attribute, but rather I think it isn't being
caught properly similar to what it should do for the disabled attribute.
Will take a look later.

On Mon, Dec 28, 2015 at 8:55 PM, TyrionGraphiste notifications@github.com
wrote:

Hi, I did the change in my PR to write readonly="readonly".
Hope it'll fix the bug.


Reply to this email directly or view it on GitHub
#2448 (comment)
.

Doggy sends his greetings from Mars.

@TyrionGraphiste

This comment has been minimized.

Copy link
Contributor

TyrionGraphiste commented Dec 29, 2015

It seems the problem is the cursor which stays in the input after its focus, under IE it does exactly the same behavior even if the dropdown has a z-index.

So I think it's rather a web-browser bug, I'll see for a CSS fix.

@TimGr

This comment has been minimized.

Copy link

TimGr commented Aug 26, 2016

user-select: none; fixed it for me in Safari

moonboots pushed a commit to moonboots/react-dates that referenced this issue Feb 7, 2017

Jack Zhang
Add user select none to prevent cursor on ios safari
The readonly attribute on touch inputs hides the keyboard, but recently
the cursor started appearing. Adding touch events removes the flashing
cursor.

Dogfalo/materialize#2448

moonboots pushed a commit to moonboots/react-dates that referenced this issue Feb 7, 2017

Jack Zhang
Add user select none to prevent cursor on ios safari
The readonly attribute on touch inputs hides the keyboard, but recently
the cursor started appearing. Adding touch events removes the flashing
cursor.

Dogfalo/materialize#2448

Also moved unprefixed properties last

moonboots pushed a commit to moonboots/react-dates that referenced this issue Feb 7, 2017

Jack Zhang
Add user select none to prevent cursor on ios safari
The readonly attribute on touch inputs hides the keyboard, but recently
the cursor started appearing. Adding touch events removes the flashing
cursor.

Dogfalo/materialize#2448

Also moved unprefixed properties last
@fega

This comment has been minimized.

Copy link

fega commented May 15, 2017

@Dogfalo did you check it?

@samfrjn11

This comment has been minimized.

Copy link

samfrjn11 commented Jun 9, 2017

I'm stilling having this issue where the multi select can't be closed in Chrome on iOS... Stopped the cursor blinking with user-select: non;

@pwill2

This comment has been minimized.

Copy link

pwill2 commented Sep 18, 2017

@Dogfalo Was this ever fixed for the disabled attribute? I have a select dropdown that I need to toggle the disabled attribute on with two buttons.

<div class="input-field col s8">
    <select disabled id="questionType">
        <option value="" disabled selected>Choose the question type</option>
        <option value="CheckboxQuestion">Checkbox Question</option>
        <option value="MultipleChoiceQuestion">Multiple Choice Question</option>
        <option value="RegionQuestion">Region Question</option>
        <option value="SelectQuestion">Select Question</option>
        <option value="SliderQuestion">Slider Question</option>
        <option value="TextQuestion">Text Question</option>
        <option value="YesNoQuestion">Yes-No Question</option>
    </select>
    <label for="questionType">type</label>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.