Slider does not slide (but does change state on click)

[riley-steele-parsons]

Environment

• Package version(s): "@blueprintjs/core": "^3.3.0"
• Browser and OS versions: Chrome, macOS High Sierra

Steps to reproduce

1. Click slider to advance position
2. Attempt to drag slider

Actual rendered HTML (note that this is embedded within a div inside a Blueprint Menu Component):

<div class="bp3-slider">
    <div class="bp3-slider-track">
        <div class="bp3-slider-progress" style="left: 0%; right: 100%; top: 0px;"></div>
        <div class="bp3-slider-progress bp3-intent-primary" style="left: 0%; right: 21%; top: 0px;"></div>
        <div class="bp3-slider-progress" style="left: 79%; right: 0%; top: 0px;"></div>
    </div>
    <div class="bp3-slider-axis">
        <div class="bp3-slider-label" style="left: 0%;">0</div>
        <div class="bp3-slider-label" style="left: 10%;">10</div>
        <div class="bp3-slider-label" style="left: 20%;">20</div>
        <div class="bp3-slider-label" style="left: 30%;">30</div>
        <div class="bp3-slider-label" style="left: 40%;">40</div>
        <div class="bp3-slider-label" style="left: 50%;">50</div>
        <div class="bp3-slider-label" style="left: 60%;">60</div>
        <div class="bp3-slider-label" style="left: 70%;">70</div>
        <div class="bp3-slider-label" style="left: 80%;">80</div>
        <div class="bp3-slider-label" style="left: 90%;">90</div>
        <div class="bp3-slider-label" style="left: 100%;">100</div>
    </div><span class="bp3-slider-handle" tabindex="0" style="left: calc(79% - 8px);"><span class="bp3-slider-label">79</span></span>
</div>

Actual behavior

Slider changes position on click but not on slide (note that this worked perfectly in version ^2.0)

Expected behavior

Slider should slide with a drag interaction

[giladgray]

@riley-steele-parsons how are you using the <Slider> itself? please post usage code, not rendered html, so I can see which props you set. this looks like partially controlled usage, where you're receiving the correct changes but not propagating them for the next render.

[giladgray]

@riley-steele-parsons OH WAIT is it in a popover? if so you've gotta bump to the latest or set captureDismiss={false}

[riley-steele-parsons]

@giladgray, no it's not in a popover.

[riley-steele-parsons]

@giladgray, here's the the usage within my functional component:

          <Slider
            onChange={handleBinsChange}
            value={ params.bins }
            labelStepSize={10}
            max={100}/>

Where params.bins is a property of the said component, and handleBinsChange is hoisting the props to the parent component's state. If you require more information let me know.

[riley-steele-parsons]

@giladgray, I'm slightly skeptical of the partially controlled usage argument because I'm able to see state/prop changes upon clicking and this configuration and logic was working perfectly with the previous 2.0 Slider.

[giladgray]

@riley-steele-parsons i see a very tiny movement of the handle in the gif above, which suggests that it's trying to move but failing. perhaps try a forceUpdate() to recompute all the DOM measurements?

[riley-steele-parsons]

@giladgray, I'll try adding that to the onChange callback. The movement is seemingly from the increment/decrement of one unit, but then the sliding stop. Then, like I said, the movement is also from clicking on the bar to change the position of the slider, which works as expected.

[giladgray]

@riley-steele-parsons all this suggests there's something in your app environment interfering with the handlers. when dragging, listeners are attached to document to capture drags everywhere. maybe you are capturing/trapping/preventing those events somehow?

i've never seen this happen in all my years of watching Slider used at Palantir.

[riley-steele-parsons]

@giladgray: I suppose that could be possible... I'll try to track down if there is anything else capturing the drags. If there is this kind of interference taking place do you have any suggestions as to how to prevent it?

[giladgray]

@riley-steele-parsons that's gonna be on you to fix it. basically avoid stopPropagation() at all costs

in my experience, manipulating events usually leads to sad times. see #2776 for me walking back what I thought was a dope new feature.

[riley-steele-parsons]

@giladgray, OK thanks for the help.

[riley-steele-parsons]

This issue has been resolved on my side.