Как сохранить фокус на поле ввода, когда в Material-ui отображается поппер

Question

Я хочу добавить кнопки «Принять» и «Отклонить» в поля ввода, которые должны появляться только тогда, когда пользователь сфокусирован на полях ввода. Подобно тому, что мы получаем в Джира.

Я попытался создать аналогичный компонент с помощью Material-UI. Проблема в том, что, когда я фокусируюсь на поле ввода, отображаются две кнопки, но позже я не могу набрать текст внутри поля ввода.

Может кто-нибудь, пожалуйста, помогите мне в этом? Ниже находится песочница с кодом: https://codesandbox.io/s/material-demo-2hrc4?file= / demo.tsx

Answer 1

Я смог сделать то, что вы хотели, используя ButtonGroup и условный рендеринг (не с popover). Я предполагаю, что у Popover есть некоторый z-индекс, возможно, из-за которого мы не можем ничего вводить при вводе, не совсем уверенный в этом.

Проверьте, работает ли он для вас - https://codesandbox.io/s/material-demo-sgpt6?file= / demo.tsx

Вы также забыли обработать состояние ввода -

     <FilledInput
        id="filled-adornment-weight"
        value={value}
        aria-describedby="filled-weight-helper-text"
        inputProps={{
          "aria-label": "weight"
        }}
        onFocus={handleClick}
        onChange={e => setValue(e.target.value)} //set value//
      />