Непоследовательное поведение select () для ввода, когда у родителя есть пользовательский выбор: нет (браузеры на основе хрома)

Question

На GIF вы можете видеть ввод с последовательным поведением select() (контент, выбранный при каждом щелчке) и второй ввод, при котором каждый 2-й щелчок не может ничего выбрать

У меня есть исторически добавленные глобальные стили к проекту

* {
  user-select: none;
}

input {
  user-select: text;
}

То, что я обнаружил - user-select: none установка на родительский элемент нарушает метод select() для его дочерних входных данных.

[ MDN ] user-select: none: текст элемента и его подэлементов недоступен для выбора.

Я могу ' удалить старые стили, потому что это может повлиять на слишком много вещей (у нас есть планы вернуться к этому, но не сейчас), поэтому я попытался переопределить поведение user-select, но не повезло с этим, когда я установил .parent {user-select: auto;} .parent .input {user-select: text;}

как JS обходной путь Я устанавливаю тайм-аут за 200 мс до select(), который работает, но с мерзким мерцанием.

Как правильно переопределить эти CSS реквизиты? (Для этого примера я обернул неработающий ввод в .buggy, чтобы другой мог оставаться нормальным. Но это не представляет структуру проекта, так как над входом находятся десятки оберток, и у каждого есть user-select: none)

Только что обнаружил, что это воспроизводимо в chromium-based браузерах - 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>

Answer 1

Это странная ошибка, которую я еще не исследовал, откуда она берется.
Это может потребовать отчета об ошибке, но обратите внимание, что я могу воспроизвести репродукцию с M50, что означает, что она, вероятно, не будет считаться высокоприоритетной.

В настоящее время вы можете обойти это, очистив Выбор документа *1004* документа перед вызовом select метода:

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>