React - Material-UI Modal, вызывающий ошибку в tabindex

Question

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

" Предупреждение: Material-UI:Узел модального содержимого не принимает фокус. Для вспомогательных технологий tabIndex узла устанавливается на «-1»."

<SettingsModal event={this.state.eventDetails} id={this.state.eventDetails.id} delete={this.handleRemoveEvent}/>

возвращает:

return(
  <>
    <Paper className={classes.SettingsModal}>
        <h1>{this.props.event.name}</h1>
        <p>{this.props.event.description}</p>
        <p>{this.props.event.id}</p>
        <Button onClick={(e) => this.props.delete(this.props.event)}>Delete Event</Button>
    </Paper>
  </>
);

Answer 1

Я нашел исправление!Чтобы устранить эту ошибку, вы должны обернуть ваш модальный контент компонентом DialogContent, например,

import DialogContent from '@material-ui/core/DialogContent';
// ...
render () {
    return (
       <Modal open={this.state.modalOpened} onClose={() => this.setState({ modalOpened: false, modalContent: null })}>
                <DialogContent>
                    {this.state.modalContent}
                </DialogContent>
            </Modal>
    );
}

Answer 2

Вся заслуга принадлежит комментарию @ Idos выше, так как он нашел ссылку на GitHub Issue .Я обнаружил, что этот конкретный комментарий был полезен.

Оберточный элемент Модального Содержания должен иметь опору tabIndex: {-1}

В вашем случае выглядит так, как вам нужносделать следующее:

return(
  <Paper tabIndex:{-1} ...>
...
  </Paper>
);

Answer 3

У меня была такая же проблема.очевидно, обтекание div вокруг SettingsModal должно исправить это.