brownieboy / react-bootstrap-slider

A React Slider control for Bootstrap 4

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Not working in a reactstrap popover

alex7071 opened this issue · comments

Scenario:
Create any type of slider in a reactstrap popover (https://reactstrap.github.io/components/popovers/)

<Button id="Popover1" onClick={this.togglePopover}>
    Launch Popover
</Button>
<Popover placement="bottom" isOpen={this.state.popoverOpen} target="DateSliderPopoverTrigger">
    <PopoverTitle>Some title</PopoverTitle>
    <PopoverContent>
        <ReactBootstrapSlider
            step={step}
            max={max}
            min={min}
            orientation={orientation}
            {...rest}
        />
    </PopoverContent>
</Popover>

Expected: Slider works normally in a popover
Actual: Slider cannot be moved.

Have not investigated why this is happening, it is my conjecture that it's unwanted interference from the combination of components/events. Either an event stopped earlier or a z-index issue?

Found the reason shortly after adding the issue. It's caused by the css from reactstrap that sets pointer-events: none; Should be closed, not a bug. Just add pointer-events: auto on the elements you want the clicks to register.

Thanks for the report, @alex7071.

Even more thanks for researching and closing it yourself!!!