6

On the gif, you can see input with consistent select() behavior (content selected on every click) and second input where every 2nd click fails to select anything

enter image description here

I have global styles historically added to the project

* {
  user-select: none;
}

input {
  user-select: text;
}

What I found - user-select: none set on the parent is breaking select() method for its children inputs.

[MDN] user-select: none: The text of the element and its sub-elements is not selectable.

I can't remove old styles because it might affect too many things (we have plans to revisit this but not now), so I tried to override user-select behavior but no luck with that when I set .parent {user-select: auto;} .parent .input {user-select: text;}

As JS workaround I'm setting timeout 200ms before select() that works but with ugly flickering.

How do I override those CSS props correctly? (For this example I wrapped broken input into .buggy so the other can remain normal. But this doesn't represent the project structure as it has dozens of wrappers above the input and each has user-select: none)

Just found this is reproducible in chromium-based browsers - chrome / edge / opera

.buggy * {
  user-select: none;
}

.buggy input {
  margin-top: 10px;
  user-select: text;
}
<input type='text' value='normal input' onclick='this.select()'/>
<div class='buggy'>
  <div>
    <input type='text' value='buggy input' onclick='this.select()'/>
  </div>
</div>
godblessstrawberry
  • 4,556
  • 2
  • 40
  • 58
  • Must be os specific: can't repro on chrome 80 nor 82 on macOs. – Kaiido Mar 04 '20 at 08:09
  • @Kaiido reproduced on `MacOS Catalina 10.15.3 (19D76) - Chrome 80.0.3987.122 (64-bit)` / `Ubuntu 19.10 - Chrome 79.0.3945.88` / `Windows 10 - Edge 80` – godblessstrawberry Mar 04 '20 at 11:05
  • @Kaiido also `MacOS Catalina 10.15.3 (19D76) - Opera 67.0.3575.53 (64-bit)` – godblessstrawberry Mar 04 '20 at 11:17
  • 1
    oO Ok.. I can repro now, using the trackpad of my macbook to perform the click. Doing the same from an external mouse doesn't reproduce the bug... – Kaiido Mar 04 '20 at 11:33
  • 1
    Ok so it was because I'm slower to raise the mouseup needed for the *click* event to fire. Calling `select()` in the *focus* event I can repro with all pointer devices. – Kaiido Mar 04 '20 at 11:45
  • _“I'm unable to remove old styles for now”_ - do you mean you _can’t_ do that, because then something else will break - or that you really were not _able_ to? – CBroe Mar 04 '20 at 11:58
  • 1
    [Found this related bug report](https://bugs.chromium.org/p/chromium/issues/detail?id=764316) – Kaiido Mar 04 '20 at 12:29
  • @CBroe updated question - I can't remove these styles because it affects too many things. we decided to stay with this bug if no workaround – godblessstrawberry Mar 04 '20 at 13:26

1 Answers1

2

That's a weird bug which I haven't yet investigated where it comes from.
It might warrant a bug report, but note I could repro from M50, which means it will probably not be considered high priority.

For the time being, you can workaround this by clearing the document's Selection before calling the select method:

document.querySelectorAll('input').forEach( elem => {
  elem.onclick = (evt) => {
    getSelection().removeAllRanges(); // clear all selection
    elem.select();
  };
});
.buggy * {
  user-select: none;
}

.buggy input {
  margin-top: 10px;
  user-select: text;
}
<input type='text' value='normal input'/>
<div class='buggy'>
  <div>
    <input type='text' value='buggy input'/>
  </div>
</div>
Kaiido
  • 123,334
  • 13
  • 219
  • 285
  • teriffic solution mate! the only problem - it uses `onclick` - all subsequent selections (e.g. select half of input instead of full) will mix with the retriggered `.select()` – godblessstrawberry Mar 04 '20 at 15:32