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

[JoannaFalkowska]

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?

[Tim-arts]

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

[Dogfalo]

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.

[Tim-arts]

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.

[timnarr]

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

[fega]

@Dogfalo did you check it?

[samfrjn11]

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]

@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>