Slider: input and change events not forwarded

Tropix126 / fluent-svelte

A faithful implementation of Microsoft's Fluent Design System in Svelte.

https://fluent-svelte.vercel.app

MIT License

614 stars 27 forks source link

Slider: input and change events not forwarded #31

Closed JVariance closed 2 years ago

JVariance commented 2 years ago

Before you start...

[X] Have you updated your dependencies? You might be using an old version of the library.
[X] Have you checked for an existing issue on this topic? If there is one, post a comment on it instead.

What browsers are you seeing the problem on?

Firefox, Chrome

Description

on:change and on:input event handlers on the Slider Component don't work.

See: https://svelte.dev/repl/833c79a8f04e497a80ed52ff2868978c?version=3.46.4

Steps To Reproduce

No response

Expected behavior

On:change and on:input events should be forwarded.

Relevant Assets

No response

JVariance commented 2 years ago

For now I modified the Slider.svelte file with an reactive onChange(value) function as shown on https://graphcms.com/blog/data-binding-in-svelte.

Tropix126 commented 2 years ago

Found the problem, events are forwarded to the outer <div> container. This is intentional, although I forgot to forward the input-specific events to the slider's <input> element. Should be an easy fix.

Tropix126 commented 2 years ago

After further investigation it seems that <input> elements need to be modified via user interaction (vs programmatic value setting) for change and input events to be fired. I've pushed a fix that dispatches a custom change event for <Slider />. Closing as this will be fixed in the next publish.

JVariance commented 2 years ago

@Tropix126 Unfortunately the event target and therefor the value aren't accessible in the CustomEvent returned from the Slider Component.