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
Related
primereact dialog not triggering onHide fn from footer action for wrapper compoent
https://codesandbox.io/s/trusting-cdn-jkn5t?file=/src/demo/DialogDemo.js
isue: open console > open dialog > press no > console not print onhide (for esc and close btn working)
Method onHide is not triggered when clicking these buttons.
It is only triggered when closing dialog from icon.
I altered your code and used ref in order to achive this via props.onHide call.
Check my
codesandbox
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.
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>
I have passed a state as a prop from a functional component to a fullscreen dialog component, how can I trigger onClose or onClick to close after the dialog is displayed
const [openLetterOnlyDialog, SetOpenLetterOnlyDialog] = React.useState(false);
<LetterOnlyDialog open={openLetterOnlyDialog}/>
**Dialog component to be opened**
export default function LettersOnly(props) {
return (
<div>
<Dialog fullScreen open={props.open} onClose={handleClose} TransitionComponent={Transition}>
</Dialog>
Following your example, add this function in your component where you are declaring the LettersOnly dialog. Pass it the same way you are passing the open prop. It will handle the close event of your dialog.
function handleClose() {
SetOpenLetterOnlyDialog(false);
}
Then the components would look more or less like this:
<LetterOnlyDialog open={openLetterOnlyDialog} close={handleClose} />
<Dialog
fullScreen
open={props.open}
onClose={props.close}
TransitionComponent={Transition}
></Dialog>