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!!!