Inconsistent select() bahavior for input when parent has user-select: none (chromium-based browsers)

godblessstrawberry :

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

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>

Kaiido :

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>