"Warning: react-modal: App element is not defined. Please use `Modal.setAppElement(el)` or set `appElement={el}`"

Add ariaHideApp={false} to Modal attributes.

This should work: 

<Modal isOpen={!!props.selectedOption}
    onRequestClose={props.clearSelectedOption}
    ariaHideApp={false}
    contentLabel="Selected Option"
    >
</Modal>

Some solutions are given in react-modal issue #133:

The problem lies here: Depending on when it evaluates [email protected]:/lib/helpers/ariaAppHider.js#L1:

  • document.body does not exist yet and it will resolve to undefined || null.
  • if Modal.setAppElement() is called with null or not called at all with the <script /> placed on <head /> (same as above).
  • Probably it can also happen if called with a selector that does not match any results.

Solutions:

Browser Rendering:

@yachaka snippet prevents this behavior by defining the element before placing the <Modal />: 

componentWillMount() {
    Modal.setAppElement('body');
}

@ungoldman answer, if you don't want to depend on `setAppElement':

Inject the bundled application JS into <body> instead of <head>.
Though ideally react-modal should wait until the DOM is loaded to try attaching to document.body.

server-side:

If rendering on server-side, you must provide a document.body, before requiring the modal script (perhaps it should be preferable to use setAppElement() in this case).

Update: react docs have been updated to include the information above, so they should now be clearer for users running into this issue.
react-modal issue #567: add information (from issue #133 linked above) to the docs.


Just include appElement={document.getElementById('app')} inside your modal like this 

<Modal
className="modal"
appElement={document.getElementById('app')}
>

It will work 100% if app is your central in index.html from where react loads.

Tags:

Javascript

Reactjs

React Modal

Web Accessibility

Recent Posts