Topic: Multiple popovers not toggling correctly
Expected behavior Have multiple popovers, just like your popover page. I have copied your code verbatim. I want the popover to disappear when the user clicks away from it. I want it to disappear when the user clicks on another popover button to show another popover.
Actual behavior Popover only disappears when I click on the button again. If I click away from it, it remains. If I click on another popover, it remains. I am using a hook for visibility just as you do within your application code.
There are not really any errors or screenshots that would help. I am more curious how your popover components determine when to be open with true/false being maintained within the state. I imagine it is to do with the id, but I am following all of your conventions with that. There must be some dependency I am missing. Any help would be appreciated.
Resources (screenshots, code snippets etc.)
Hello,
There is a mistake in our code snippet examples which will be fixed.
Each popover should has different id.
You can try copy code below:
import React from 'react';
import { MDBPopover, MDBPopoverBody, MDBPopoverHeader, MDBBtn, MDBContainer } from 'mdbreact';
const PopoverPage = () => {
return (
<MDBContainer>
<div style={{ display: 'flex' }} className="m-5 p-5">
<MDBPopover placement="top" popover clickable id="popper1">
<MDBBtn>popover on top</MDBBtn>
<div>
<MDBPopoverHeader>popover on top</MDBPopoverHeader>
<MDBPopoverBody>
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
quam venenatis vestibulum.
</MDBPopoverBody>
</div>
</MDBPopover>
<MDBPopover placement="right" popover clickable id="popper2">
<MDBBtn>popover on right</MDBBtn>
<div>
<MDBPopoverHeader>popover on right</MDBPopoverHeader>
<MDBPopoverBody>
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
quam venenatis vestibulum.
</MDBPopoverBody>
</div>
</MDBPopover>
<MDBPopover placement="bottom" popover clickable id="popper3">
<MDBBtn>popover on bottom</MDBBtn>
<div>
<MDBPopoverHeader>popover on bottom</MDBPopoverHeader>
<MDBPopoverBody>
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
quam venenatis vestibulum.
</MDBPopoverBody>
</div>
</MDBPopover>
<MDBPopover placement="left" popover clickable id="popper4">
<MDBBtn>popover on left</MDBBtn>
<div>
<MDBPopoverHeader>popover on left</MDBPopoverHeader>
<MDBPopoverBody>
Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia
quam venenatis vestibulum.
</MDBPopoverBody>
</div>
</MDBPopover>
</div>
</MDBContainer>
);
};
export default PopoverPage;
Best regards.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB React
- MDB Version: 4.13.0
- Device: Macbook pro
- Browser: Chrome
- OS: MacOS mojave
- Provided sample code: No
- Provided link: No