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.
Related
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'm rendering a Modal from reactstrap library, and i want to have within this text modal another link tag. Something like "Click here to show it". So, when the modal appears, the user can see that text and also can click on the here word to render another different Modal. How can achieve that?
This is my code:
code where i'm calling the Modal
<Modal
show={showGeneralModal}
children={"Click " + here + " to show it"}
title={modalTitle}
size={modalSize}
onExit={this.toggleNormalModal}
/>
code from the original exported Modal
return (
<div>
<Modal
isOpen={isOpen}
backdrop="static"
keyboard={false}
toggle={this.toggle}
size={size}
onExit={onExit}
>
<ModalHeader className={modalHeaderClasses} toggle={this.toggle}>
{title}
</ModalHeader>
<ModalBody className={modalBodyClasses}>
{children}
</ModalBody>
</Modal>
</div>
);
I'm getting right now this text within the modal:
Click [object Object] to show it
And i would like to have instead
Click here to show it
and when i click on here word, the other Modal should be rendered.
Any suggestions?
I can't modify the original Modal code cause it is being used for many other components in different places.
Btw, i was in a wrong way to do that. If you are in the same trouble, you may know that children is an already prop of react which allows you to access whatever you passed in the component that you are accessing to.
Knowing that, you don't have to pass children prop, just pass within the component whatever you want to be inside of children prop. So, instead of doing this:
<Modal
show={showGeneralModal}
children={"Click " + here + " to show it"}
title={modalTitle}
size={modalSize}
onExit={this.toggleNormalModal}
/>
do this:
<Modal
show={showGeneralModal}
title={modalTitle}
size={modalSize}
onExit={this.toggleNormalModal}
> Click here to show it
</Modal>
I am using the toast messages in reachjs together with the semantic-ui. The problem is that the toast message is showing behind the modal when dimmer is set to blurring. Otherwise it is showing on the top of the page as expected.
Do you have the same issues? How this can be corrected?
Thanks for your help!
<Modal
centered
size={'large'}
open={this.props.openVariationGeometry}
onClose={() => this.props.closeVariationGeometryModal()}
closeIcon
dimmer={'blurring'}
>
<Header icon="cube" content={'Change the Gemetry of the Selected Variation.'} />
<Modal.Content>
<VariationGeometryForm />
</Modal.Content>
</Modal>
Example
define a css rule for your toast with filter: none, or a general rule like this
.toast-container {
filter: none !important;
}
It is very old question but I ended here looking for a solution to the same problem so I wrote this down. At first, as this issue says, the only way I found to show the toasts with a modal present is by putting the Toast Container inside the modal. This method has the problem that you could see also the "main" toast blurred under the modal.
Later I found a final solution here. Both the toast container and the modal must be mounted on the same DOM node (I used #App).
First you have to put the toast container in the App component:
const App = () => (
<div id='App'>
<YourComponents />
<ToastContainer
className='dimmer toast-container' // 'dimmer' class is required to avoid blurring by modal
/>
</div>
)
After that you need the following css rule:
.blurring.dimmable > .toast-container {
// this prevents the toast from darkening by the modal
background-color: unset;
}
And finally the modal must be mounted in the same node:
<Modal
centered
size={'large'}
open={this.props.openVariationGeometry}
onClose={() => this.props.closeVariationGeometryModal()}
closeIcon
dimmer={'blurring'}
mountNode={document.getElementById('App')} // modal mounted on #App
>
<Header icon="cube" content={'Change the Gemetry of the Selected Variation.'} />
<Modal.Content>
<VariationGeometryForm />
</Modal.Content>
</Modal>
I have a component with render method like this:
<ListGroup>
{myarray.map(function(item, k) {
return (
<ListGroupItem
key={item._id}
bsStyle={item.status==='FAIL'?'danger':null}
>
Hello world
<button onClick={showModal}>Open Modal</button>
</ListGroupItem>
);
})}
</ListGroup>
I would like to show the modal on clicking of button with text Open Modal. There will be many list items with the button, however the content of the modal will be different which is dynamic populated from myArray.
I'm stuck here, since react-bootstrap modal needs the show state which I'm not aware of how to handle from multiple modals on the same page.
http://plnkr.co/edit/f8Z4bucIq0WblkNSIMP5?p=preview
render: function() {
console.log('render', this.state)
return (
<div>
<p>Click to get the full Modal experience!</p>
<ReactBootstrap.Button
bsStyle="primary"
bsSize="large"
onClick={this.open}
>
Launch demo modal
</ReactBootstrap.Button>
<ReactBootstrap.Modal show={this.state.showModal} onHide={this.close}>
<span>The Modal</span>
</ReactBootstrap.Modal>
</div>
);
}
The JSX seems to be compiling. The Modal component is available. The show prop is being set when you click the button. The Bootstrap CSS is there.
But the Modal always shows on page load even though its show prop is false.
What am I doing wrong?
I just took a look at your plunker and saw that you were using an older version of react-bootstrap. I think this was your problem I changed the version to a newer one and it worked.
https://cdnjs.com/libraries/react-bootstrap I just used the v0.28.3