I would like some assistance executing onHide event function which would setShow state to false when Close Button inside the Modal component is clicked.
Demo sandbox found here: Sandbox
I've temporarily bypassed submitHandler for debugging the modal only, line 71 will trigger the modal in a normal scenario
Do note Close is meant to window.close()
First, you have to add a new callback (e.g: buttonClose) for your modal's Close button.
<Button
variant="secondary"
{...props}
onClick={() => props.buttonClose()}
className="text-center"
>
Close
</Button>
And invoke it from your Step Component.
<SuccessModal
ref={props.superModalElement}
show={show}
onHide={handleClose}
buttonClose={handleClose}
/>
Working demo at CodeSandbox.
Related
I am using react-bootstrap version 1.5.2 in react version 17.0.1. The problem is that the modal closes immediately after I click anywhere inside the modal body and that is not its natural behavior. I looked at some other questions that suggested using backdrop={ 'static' } but that too didn't work.
The other modal that I have in the page opens just fine and that too has the same components - the accordion inside. The only thing that is different here is I have get methods in useState and elements inside accordion is editable (used some functions there) but I dont think they are related to this modal behaviour as I haven't used anything to trigger the state. This the code how I have implemented the modal.
//the show.hide toggle is the usestate
const [showHelper, setShowHelper] = useState(false);
<div className="clarify-icon" onClick={() => setShowHelper(true)}>
<FaInfoCircle size="24" color="#BC2A20" className="pointer" />
</div>
<Modal
show={showHelper}
// backdrop="static"
onHide={() => setShowHelper(false)}
className="modal-left"
>
<Modal.Header closeButton>
<Modal.Title>Helper Text Templates</Modal.Title>
</Modal.Header>
<Modal.Body>
<Accordion defaultActiveKey="0">
...
</Modal>
It is pretty much the same thing. I am not sure what went wrong here.
Chakra Ui provides disclosure
const { isOpen, onOpen, onClose } = useDisclosure();
and in the documentation this button will close the drawer
<Button variant="outline" mr={3} onClick={onClose}>
Cancel
</Button>
they haven't provided something like close() function to close it programmatically, or am i missing something
onClose is function provided from chakra-ui which will close the drawer or any portal created opened by chakra-ui. onClose behaves like close() function only.
When you want to open the drawer use onOpen function inside onClick or what you want, when you want to close the drawer use onClose inside inside onClick or what you want.
Don't worry, these have code behind which take care of handling drawer.
pass onClose in onClick={} and don't forget to add () after onClose to prevent errors
<Button onClick={()=>onClose()}>X
I have made a simple button in react app.
<button onClick={console.log('clicked')}>Click</button>
The problem is that button is continuously click without clicked by me.
<button onClick={() => console.log('clicked')}>Click</button>
is the solution. When you put paranthesis without using the arrow function, it will automatically execute without waiting for you to click the button
onClick takes function as a parameter. Try this and it should work correctly:
<button onClick={ () => { console.log('clicked') } }>Click</button>
Say I want to stop the event from propagating upon exit from the modal, for example when clicking on the background or the exit button which will close the modal. But then it'll redirect me to the (parent)? onClick event upon exiting.
<Modal onHide={(e) => {
e.stopPropagation();
setShow(false);
...
}}>
<Modal/>
The above does not work. I also tried onExit which also doesn't work.
The workaround was to use a div element around the Modal to control the event.
<div
onClick ={(e) => e.preventPropagation()}
>
<Modal>
<Modal/>
</div>
import Modal from 'react-modal'
...
<div>
<button onClick={() => this.setState({showModal : true})/>
<Modal isOpen=this.state.showModal} className={...}
onRequestClose={ () =>this.setState({showModal : false})/>
</div
I notice that react-modal generate a completely new modal every time its triggered .
Is it possible to prevent the unmounting process of the modal when its closed ?
I wish the changes that has been done in the modal will save and perform next time the user open the modal
Just use the keepMounted tag:
<Modal keepMounted />