CODEWITHSUNDEEP
reactjsreact-bootstrap
thousight
thousight

Reputation: 1154

React Bootstrap Popover flashes when clicking OverlayTrigger

I want the OverlayTrigger to be able to dismiss the Popover by both clicking outside the button and clicking on the button. However, when I set the trigger to be trigger={['click', 'focus']}, the Popover would flash and disappear when I click to button to show it. 

getInitialState() {
    return { show: true };
},

classificationPopover() {
    return (
        <ReactBootstrap.Popover id="popover" title="Popover">
            Pop!
        </ReactBootstrap.Popover>
    );
},

render: function() {
    return (
        <div>

            <ReactBootstrap.OverlayTrigger
                trigger={['click', 'focus']}  // Here is probably the tricky part
                placement="right"
                overlay={this.classificationPopover()}>
                    <ReactBootstrap.Button
                        bsStyle="default"
                        className="btn btn-default btn-circle">
                            <div className="btn-circle-text">?</div>
                    </ReactBootstrap.Button>
            </ReactBootstrap.OverlayTrigger>

        </div>
    )
}

fiddle

This happens when you click outside the button, and then you click the button. But if you just click the button and close the popover with the button, things work fine.

I know that adding a RootClose property in OverlayTrigger and just keep "click" for trigger would work, but for my work requirement I'm not allowed to use RootClose, so I need a different solution. Thanks :D

Upvotes: 1

Views: 2518

Answers (1)

Geoffrey Hale
Geoffrey Hale

Reputation: 11488

For anyone attempting to use trigger with OverlayTrigger, please consider using Overlay instead.

The OverlayTrigger component is great for most use cases, but as a higher level abstraction it can lack the flexibility needed to build more nuanced or custom behaviors into your Overlay components. For these cases it can be helpful to forgo the trigger and use the Overlay component directly.

Upvotes: 1

Related Questions