Repository: shoelace-style/shoelace

Issue #264: Need to have differentiating event types for components like sl-rating
Created: 2020-11-04T21:55:48Z
Is your feature request related to a problem? Please describe.
when you update the ratings via a value returned from the server, the 'sl-change' event gets triggered. there needs to be a way differentiate this from an event which should occur when there is a 'change by user' by clicking on the ratings component.
Describe the solution you'd like
another event type to know if a user has clicked on the control and actioned (rated any post)
Describe alternatives you've considered
listened for a click event alongside the sl-change event
Additional context
N/A

Duplicate issue #917: Inconsistent emit of `sl-change` events
Created: 2022-09-20T21:52:06Z
This is a follow up from Discord: https://discord.com/channels/739437527907303535/1020332605599662181/1020666965850869801
Describe the bug
Currently the behaviour of emitting sl-change events in Shoelace components isn't
a) consistent and
b) imho doesn't adhere to best practices regarding data flow and native form elements
My opinion regarding data flow and native form elements
sl-change events shouldn't be emitted when changing the value programmatically but only as a result of some kind of user interaction with the component. This can be observed with native form elements like <input> or <select> and is also comparable with unidirectional data flow in React with the difference that in React a controlled component wouldn't change its state on its own but only through its props and in html5 form elements it would control its own state by default but allows being used in a controlled way through props and events.
Components
I've looked through some (not all) relevant components and checked the current behaviour of sl-change and sl-input where applicable.
<sl-rating>
https://github.com/shoelace-style/shoelace/blob/next/src/components/rating/rating.ts#L165
Correct: Clicking the stars emits sl-change.
Incorrect: Changing the value via .value emits sl-change.
<sl-checkbox>
https://github.com/shoelace-style/shoelace/blob/next/src/components/checkbox/checkbox.ts
Correct: Clicking the element emits sl-change.
Correct: Changing the state via .checked doesn't emit sl-change.
<sl-input>
https://github.com/shoelace-style/shoelace/blob/next/src/components/input/input.ts
Correct: Entering some input and blurring the component emits sl-change.
Correct: Changing the state via .value doesn't emit sl-change.
Incorrect: Changing the state via .setTextRange() emits sl-change.
Incorrect: Changing the state via .setTextRange() emits sl-input.
<sl-textarea>
https://github.com/shoelace-style/shoelace/blob/next/src/components/textarea/textarea.ts
Correct: Entering some input and blurring the component emits sl-change.
Correct: Changing the state via .value doesn't emit sl-change.
Hidden bug: Changing the state via .setTextRange() might also emit sl-change however because of twice the same if condition only the first one gets executed and the second one should always get skipped and therefore sl-change never emitted.
Incorrect: Changing the state via .setTextRange() emits sl-input.
<sl-range>
https://github.com/shoelace-style/shoelace/blob/next/src/components/range/range.ts
Correct: Changing the value through drag and drop emits sl-change.
Correct: Changing the state via .value doesn't emit sl-change.
Besides: One could argue that while doing drag and drop only sl-input should be emitted as it is an ongoing input process. And only after ending the drag drop sl-change should be emitted. That would be comparable to input elements where every key fires sl-input but only blurring the input results in sl-change being emitted.
<sl-radio-group>
https://github.com/shoelace-style/shoelace/blob/next/src/components/radio-group/radio-group.ts
Correct: Clicking an radio button emits sl-change.
Incorrect: Changing the value via .value emits sl-change.
To Reproduce
Steps to reproduce the behavior:

Add an sl-change event listener to a component.
Change the value via ui and check whether the listener gets triggered.
Change the value programmatically (via dev tools) and check whether the listener gets triggered.

Closing comment (2022-09-20T21:52:49Z): Related to #264