Menu
How to fix this warning in console of a React app using the react-modal package:
Warning: react-modal: App element is not defined. Please use
Modal.setAppElement(el)or setappElement={el}
I have not been successful at figuring out what el is supposed to be.
Context: in my App.js root component file:
... import Modal from 'react-modal'; ... class App extends Component { ... render(){ ... <Modal className="modal" overlayClassName="overlay" isOpen={foodModalOpen} onRequestClose={this.closeFoodModal} contentLabel="Modal" > ... } } Where ... indicates code not shown.
Everything works fine, but when the Modal is opened, the following Warning appears in my console:
index.js:2177 Warning: react-modal: App element is not defined. Please use
Modal.setAppElement(el)or setappElement={el}. This is needed so screen readers don't see main content when modal is opened. It is not recommended, but you can opt-out by settingariaHideApp={false}.
In the react-modal docs all I can find is the following:
App Element The app element allows you to specify the portion of your app that should be hidden (via aria-hidden) to prevent assistive technologies such as screenreaders from reading content outside of the content of your modal.
If you are doing server-side rendering, you should use this property.
It can be specified in the following ways:
DOMElement
Modal.setAppElement(appElement);query selector - uses the first element found if you pass in a class.Modal.setAppElement('#your-app-element');
Unfortunately, this has not helped ! I cannot figure out what el is supposed to represent.
Here are some of the many property variations I have tried adding to my Modal component:
`appElement={el}`, `appElement="root"` where `root` is the id that my App component is injected into `appElement={'root'}` `appElement="div"`, `appElement={<div>}`, `appElement={"div"}` I've also tried calling Modal.setAppElement('root'); from inside src/index.js, where root is the root element that my App component is injected into, and index.js is where I do that.
786
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:
undefined || null. Modal.setAppElement() is called with null or not called at all with the <script /> placed on <head /> (same as above). selector that does not match any results.@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 ideallyreact-modalshould wait until the DOM is loaded to try attaching todocument.body.
If rendering on server-side, you must provide a
document.body, before requiring the modal script (perhaps it should be preferable to usesetAppElement()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.
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With