score:1
Accepted answer
to close a modal when you click outside, you have to modify your modals component. first you create a ref at the beginning:
modalref = react.createref();
then you use that ref in the render function:
return (
<div ref={this.modalref}...
you listen to mousedown events during the lifetime of your modal component:
componentdidmount() {
document.addeventlistener("mousedown", this.handlemousedown);
}
componentwillunmount() {
document.removeeventlistener("mousedown", this.handlemousedown);
}
and you test if the click was outside of the ref in the handler:
// mouse click event, if outside of the popup then close it
handlemousedown= (event) => {
if (!this.modalref.current.contains(event.target)) {
// notify the parent with a callback to hide the modal
};
}
Source: stackoverflow.com
Related Query
- How to add transition on closing Modal in React and how to close when clicked outside of the Modal?
- react Portal - how to close modal when clicking outside of modal and how to assign ref to modal inside parent component rendering modal?
- How do I add a title and close button to the top of a menu (above the 1st item in a button menu when clicked in material-ui?
- React bootstrap modal how to send post request first and then close modal when submitting values
- Closing React Semantic UI modal with button and close icon
- How to add a tab dynamically when we click a button using React js and Bootsrap 4
- How to close a modal form when it's sent and it changes the app's state in React?
- How to add close bracket and close tag for react code mirror
- Fade out animation when closing a screen with React and CSS
- How to add a <Field /> when a button is clicked inside a Form with React & Formik?
- React using reactstrap navbar: how to add and remove class on navbar tag when window scrolls
- How to call API and stores results in a state when a form submit is clicked using react hooks
- How can I stop the Select component from closing when I clicked one of its item(Input element) - react antd
- React - how to open modal when user tries to reload or close window/tab?
- React how to add class to parent element when child element is clicked
- how to add code more in react to hide and show pages when I click again
- Will the background component unmount when modal is open in react? If not, how to maintain/store states of modal and react component using redux?
- react toggle and close when clicked at other element/body failed
- How to close modal when navigating to another page in React
- How to open pop up modal when form submit sucessfully and hide pop after 2 mintues and redirect to another page in react js?
- How do I add a class to a react element when it is clicked
- React Ionic Modal not closing when button clicked
- How can I pass id/class of a button present in a handlebar file into the typescript to launch a react modal when button is clicked
- How to dynamically add and remove mapped array to another array when clicked and remove from arr when clicked again in reactjs
- How to add class to the clicked button and remove a class to the previously clicked button in React
- How do I add a transition to my navbar menu in react when I click the toggle button
- Can't figure out how to pass props to components when using React Router v5 and Redux
- How to keep "Add" button fixed at the top when clicked to add a new input from field in React JS
- How to display the last page when user clicks on add new row,so that user can view the newly added row using react js and prime react
- How to update the state when 1 option in tag select is clicked and navigte to another screen in React Js
More Query from same tag
- How to prevent modal from re-rendering when I update the state?
- React Container not Re-Rending after Redux State Change
- Iterating files from file input
- React / Rails : Append dynamically element to DOM
- How to comment styles inside <style jsx> tag in NextJS
- Convert days to get hours, minutes and seconds of two dates using momentjs
- Separate CSS files using create-react-app code-splitting without ejecting
- Is there a way to limit filtering combo box onChange API calls?
- React router animation getting unexpected token after browserify
- A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>
- How do I use Colors in BlueprintJS?
- React Component not displayed in HTML
- How to refer to previous state in React's child component?
- How can i convert this JSON object into this format?
- Unable to get user Data passed as a context value by React useContext
- Return call reached before return statement in callback
- Firestore add data over an object within a document's data REACT.JS
- Formik is not maintaining order of keys for object passed into initialVals
- In react, how can I deselect an element after it has been set as active with onClick?
- React - intl with external translation file
- Persistent navigation in a NextJs _app
- Can i send parameters from React to SCSS?
- ReactJS Failed Prop Type With 'undefined' Value
- How to share a specific variable between different react components
- Passing an additional parameter with an onChange event with custom component
- My repository is using CI/CD, but I have this error. How can I fix it?
- Input text overlapping in TextField multiline area of Material-UI
- How to make React app show the state immediately
- Customer ListItem of Selectable List doesn't work in material-ui
- How to expand Material UI accordion on mouse over