spectrum-web-components
spectrum-web-components copied to clipboard
adobe
[Bug]: Slider stops emiting 'input' events
Code of conduct
- [x] I agree to follow this project's code of conduct.
Impacted component(s)
sp-slider
Expected behavior
Slider should emit 'input' events when handle is moved.
Actual behavior
Performing the actions in the attached video, the component stops sending 'input' events. Only 'change' events are emitted. The screen capture didn't record the mouse cursor, but it's only interacting with the slider.
Screenshots
https://github.com/user-attachments/assets/6fc8b3c5-f50a-4163-81b5-c712ac657375
What browsers are you seeing the problem in?
Chrome
How can we reproduce this issue?
- Open the debug console.
- Click on the slider line or move the slider: 'input' events are emitted, besides 'change' events.
- After moving the slider, click on the slider line, so that the handle moves there. No more 'input' events are emitted, even if you drag the slider.
Sample code or abstract reproduction which illustrates the problem
<!doctype` html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script type="module">
// minimum theme imports:
import '@spectrum-web-components/theme/spectrum-two/theme-dark.js';
import '@spectrum-web-components/theme/spectrum-two/theme-light.js';
import '@spectrum-web-components/theme/spectrum-two/scale-medium.js';
import '@spectrum-web-components/theme/sp-theme.js';
import '@spectrum-web-components/slider/sp-slider.js';
window.addEventListener('load', async function() {
const slider1 = document.getElementById("slider1");
async function slider1Event(e){
console.log(e.type, e.target.value);
}
slider1.addEventListener('input', slider1Event);
slider1.addEventListener('change', slider1Event);
});
</script>
</head>
<body>
<sp-theme id="theme-tag" system="spectrum-two" scale="medium" color="dark">
<div>
<sp-slider id="slider1" label="Scale" editable
min="0" max="10" step="0.1" value="1"></sp-slider>
</div>
</sp-theme>
</div>
</body>
</html>
Severity
SEV 2
Logs taken while reproducing problem
No response
Would you like to track this issue in Jira?
- [x] Yes, please tell me the ticket number!
Hello @jndiogo Would you mind creating an abstract reproduction of the issue that you see on stackblitz so that we can triage this as soon as possible? If this is your first time creating a repro on stackblitz, we have some guidelines for you that might be helpful - https://github.com/adobe/spectrum-web-components?tab=readme-ov-file#using-stackblitz-for-reproductions
i'm seeing this as well.
stackblitz repro: https://stackblitz.com/edit/vitejs-vite-yu7z8h5b?file=src%2Fmy-element.ts
clicking the track stops emitting input events if the handle has already been interacted with.
https://github.com/user-attachments/assets/36fbe5c3-2eb0-4d35-be69-a6d02797ef4d
This appears to only happen with editable sliders.
I've narrowed down the source of the bug to here:
https://github.com/adobe/spectrum-web-components/blob/cc6e91eca2b5d84769d2ed42758299e2ec57e3b2/packages/slider/src/HandleController.ts#L123-L132
It appears input.valueAsNumber === handle.value starts becoming false after the handle has been touched as the values lag behind each other.
I'm not sure why that check was originally needed but modifying that segment to
const { input } = elements;
input.valueAsNumber = handle.value;
this.requestUpdate();
if (handle.dragging) {
handle.dispatchInputEvent();
}
so that it always dispatches input event while handle is dragging seems to fix this.
I haven't looked too closely as to whether this breaks anything. Existing tests seem to pass. It's not causing extra input events from other interactions I've tried. Though, as a side note, I'm noticing using the number control seems to fire 2 inputs and a change event but it looks to be doing that without the above change too.
Great analysis! Please feel free to open a PR and we would take this forward.
