Checked Radio Input не срабатывает: проверяется псевдоселектор - PullRequest
Новая
       3

Checked Radio Input не срабатывает: проверяется псевдоселектор

1 голос
/ 07 марта 2020

Основной вопрос:

Как проверенный стиль не может быть активным, если элемент четко проверен по разметке?

Контекст:

Я столкнулся с этой проблемой вчера и решил это с помощью уродливого хака, но лучше бы лучше его понять.

Для начала, это обработанная разметка: 

<fieldset id="Påbyggnad/Omskolning *" class="RadioButton-module_RadioButtons__3slSm">
  <div class="RadioButton-module_RadioButton__1Ftxu">
    <label for="Påbyggnad i tidigare yrkesinriktning">Påbyggnad i tidigare yrkesinriktning</label>
    <input id="Påbyggnad i tidigare yrkesinriktning" name="Omskolning" type="radio" value="false" disabled="" checked="">
  </div>
  <div class="RadioButton-module_RadioButton__1Ftxu">
    <label for="Omskolning i ny yrkesinriktning">Omskolning i ny yrkesinriktning</label>
    <input id="Omskolning i ny yrkesinriktning" name="Omskolning" type="radio" value="true" disabled=""> 
 </div>
</fieldset>

Как мы видим, первый вход - проверено , и оба входа отключены .

Несмотря на это, активен только CSS, связанный с отключенными *1019* псевдоселекторами: 

.RadioButton-module_RadioButtonGroup__ZHytl .RadioButton-module_RadioButtons__3slSm :disabled {
    background-color: #dde0e7;
    border: 1px solid #a2a4aa;
    cursor: unset;
}

Соответствующий фрагмент (S CSS) таблицы стилей: 

:disabled {
  background-color: $disabled-color;
  border: 1px solid $gray-2;
  cursor: unset;
}
:disabled:checked {
  background-color: $gray-1;
  border: 1px solid $gray-2;
}

Дополнительный контекст:

Мы используем React и defaultChecked . См. Частичную реализацию ниже: 

export const RadioButton = ({
  label,
  id = label,
  defaultChecked,
  onClick,
  onChange,
  testSelector,
  name,
  value,
  onBlur,
  disabled,
}) => {
  return (
    <div className={s.RadioButton}>
      <label htmlFor={id} className={s.RadioButtonLabel}>
        {label}
      </label>
      <input
        className={s.RadioInput}
        disabled={disabled}
        defaultChecked={defaultChecked}
        id={id}
        onClick={onClick}
        onChange={onChange}
        onBlur={onBlur}
        name={name}
        value={value}
        data-testid={testSelector}
        type="radio"
      />
    </div>
  )
}

Из-за способа рендеринга компонента он не является нетипичным, он перерисовывается 6 раз за очень короткий промежуток времени (вероятно, не идеален сам по себе, но позволяет сосредоточиться на основном вопрос вместо этого!) Когда defaultChecked оценивается в true или false в одном из первых 5 рендеров, это значение сохраняется в других рендерах, тогда как нулевая / неопределенная оценка заменяется первой true / * Оценка 1040 *, которая обычно появляется в 3-м рендере.

Кажется очень разумным, что defaultChecked определяется его первым ненулевым значением sh, но существуют конфликтующие состояния:

  • Разметка говорит checked
  • Таблица стилей говорит, что не проверено
  • defaultChecked, кажется, говорит, что не проверено, но разметка, которая является функцией от, не отражает это ?

Как может отображаться разметка checked, если вход действительно не проверен?

PS "Гадкий взлом", используемый для решения этой проблемы, заключался в том, чтобы гарантировать, что defaultChecked никогда не будет оцениваться к ненулевому значению sh во время ранних рендеров.

...