Блог

Я пытаюсь сделать мою форму доступной.

Вот моя ссылка на песочницу: https://codesandbox.io/s/typescript-material-ui-textfield-forked-0xh13?file=/src/App.tsx

Мои требования следующие:

1. После отправки формы с ошибками проверки 1-й ввод с ошибкой должен быть сфокусирован

Точно так же, как эта форма: https://a11y-guidelines.orange.com/en/web/components-examples/forms /

Есть ли в material ui опция для достижения этой цели?

Это мой код:

 import React from "react";
import TextField from "@mui/material/TextField";
import { Form, Field } from "react-final-form";

const required = (value: string) =>
  value ? undefined : "This field cannot be blank";

const App = () => (
  <Form
    onSubmit={(form_data) => console.log(form_data)}
    render={({ handleSubmit, submitting }) => (
      <form onSubmit={handleSubmit}>
        <Field
          name="line1"
          validate={required}
          render={({ input, meta }) => (
            <TextField
              {...input}
              placeholder="Required"
              label="Required"
              helperText={meta.error}
              error={meta.touched amp;amp; meta.error}
            />
          )}
        />
        <Field
          name="line2"
          render={({ input, meta }) => (
            <TextField
              {...input}
              placeholder="Optional"
              label="Optional"
              helperText={meta.error}
              error={meta.touched amp;amp; meta.error}
            />
          )}
        />
        <button onClick={handleSubmit}>Save</button>
      </form>
    )}
  />
);

export default App;

 

В итоге я использовал плагин для react-final-form под названием final-form-focus. Я не думаю, что есть что-то для MUI

https://codesandbox.io/s/typescript-material-ui-textfield-forked-vep9e?file=/src/App.tsx