Multiple popovers not toggling correctly

Topic: Multiple popovers not toggling correctly

purtzerb free asked 5 years ago

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.)

Add comment

Aliaksandr Andrasiuk staff answered 5 years ago

0 0 Best answer

<p>Hello, </p>

<p>There is a mistake in our code snippet examples which will be fixed.</p>

<p>Each popover should has different <code>id</code>.</p>

<p>You can try copy code below:</p>

<pre class="prettyprint"><code>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;
</code></pre>

<p>Best regards.</p>

Please insert min. 20 characters.

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.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: 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

purtzerb

52Support score
3Questions 3Answers 0Snippets