Визуальный баг с material-ui

Question

Столкнулся с довольно странным визуальным багом. Думаю, лучше взглянуть на видео: https://youtu.be/P9mQo5WC-Os

В чём проблема?

При фокусе у поля есть анимация: placeholder становится меньше и отправляется на верх, а при потере фокуса, если поле осталось пустым, возвращается на место. Однако после очищения формы методом e.target.reset() или e.target.content.value = "" placeholder перестаёт реагировать на фокус. Возникает такое чувство, будто программа думает, что в поле всё ещё находится текст. Это странно, ведь поле было очищено. Впрочем, если после отправки формы в поле ввести какой-нибудь текст, а потом стереть, всё возвращается на круги своя.

CodeSandBox: https://codesandbox.io/s/mui-textfield-bug-bv31r9?file=/src/App.js

Answer 1

Я так и не нашёл однозначного ответа, почему возникает такая проблема, но нашёл её решение: для этого нужно сделать input "контролируемым", т.е. обновлять его значение через state.

export default function App() {
  const [val, setVal] = useState("");

  const onChange = (e) => {
    setVal(e.target.value);
  };

  const onSubmit = (e) => {
    e.preventDefault();
    e.stopPropagation();

    console.log(e.target.content.value);

    setVal("");
  };

  return (
    <div className="App">
      <form onSubmit={onSubmit} id="someForm">
        <TextField
          id="someForm_content"
          name="content"
          label="Content"
          variant="standard"
          /* Now we control the input's value */
          value={val}
          onChange={onChange}
        />
        <Button type="submit" variant="contained" children="OK" />
      </form>
    </div>
  );
}

Обновлённый CodeSandBox: https://codesandbox.io/s/mui-textfield-bug-bv31r9?file=/src/App.js

БЛОГ НА HUSL

Визуальный баг с material-ui

В чём проблема?

Ответы (1 шт):