React - Material-UI Modal causing an error with the tabindex

user_3681469 0
Viewed 8312

I am getting this error when I open a modal on my React app but I can't figure out what it means or how to fix it.

"Warning: Material-UI: the modal content node does not accept focus. For the benefit of assistive technologies, the tabIndex of the node is being set to "-1"."

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

returns:

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>
  </>
);
material-ui reactjs
4 Answers

I've found fix! To remove this error you should wrap your Modal content with DialogContent component like this

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>
    );
}
user_74190750

i had the same problem. apparently wrapping a div around SettingsModal should fix it.

user_96566630

Following @Wolfman comment, I just used Fragment from React, because it doesn't add any DOM element:

render () {
    return (
       <Modal open={this.state.modalOpened} onClose={() => this.setState({ modalOpened: false, modalContent: null })}>
                <>
                    {this.state.modalContent}
                </>
            </Modal>
    );
}

Even though, I still don't understand that issue :/

user_82548250

All the credit goes to @Idos's comment above since he found the reference to the GitHub Issue. I found that this specific comment was useful.

The wrapping element of the Modal Contents needs to have a prop of tabIndex: {-1}

In your case looks like you need to do the following:

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