feat(select): forward change event

Dispatch `input` instead of `change` when props change internally
since `change` is a user event and `input` is an internal event
This commit is contained in:
Enrico Sacchetti 2022-09-26 16:35:57 -04:00
commit 29a83c325c
4 changed files with 9 additions and 8 deletions

View file

@ -3179,8 +3179,8 @@ None.
| Event name | Type | Detail | | Event name | Type | Detail |
| :--------- | :--------- | :-------------------------------- | | :--------- | :--------- | :-------------------------------- |
| change | dispatched | <code>string &#124; number</code> | | input | dispatched | <code>string &#124; number</code> |
| input | forwarded | -- | | change | forwarded | -- |
| focus | forwarded | -- | | focus | forwarded | -- |
| blur | forwarded | -- | | blur | forwarded | -- |

View file

@ -10252,8 +10252,8 @@
} }
], ],
"events": [ "events": [
{ "type": "dispatched", "name": "change", "detail": "string | number" }, { "type": "dispatched", "name": "input", "detail": "string | number" },
{ "type": "forwarded", "name": "input", "element": "select" }, { "type": "forwarded", "name": "change", "element": "select" },
{ "type": "forwarded", "name": "focus", "element": "select" }, { "type": "forwarded", "name": "focus", "element": "select" },
{ "type": "forwarded", "name": "blur", "element": "select" } { "type": "forwarded", "name": "blur", "element": "select" }
], ],

View file

@ -1,6 +1,6 @@
<script> <script>
/** /**
* @event {string | number} change * @event {string | number} input
*/ */
/** /**
@ -114,7 +114,7 @@
selected = $selectedValue; selected = $selectedValue;
if (prevSelected !== undefined && selected !== prevSelected) { if (prevSelected !== undefined && selected !== prevSelected) {
dispatch("change", $selectedValue); dispatch("input", $selectedValue);
} }
prevSelected = selected; prevSelected = selected;
@ -163,6 +163,7 @@
class:bx--select-input--sm="{size === 'sm'}" class:bx--select-input--sm="{size === 'sm'}"
class:bx--select-input--xl="{size === 'xl'}" class:bx--select-input--xl="{size === 'xl'}"
on:change="{handleChange}" on:change="{handleChange}"
on:change
on:input on:input
on:focus on:focus
on:blur on:blur

View file

@ -109,8 +109,8 @@ export interface SelectProps
export default class Select extends SvelteComponentTyped< export default class Select extends SvelteComponentTyped<
SelectProps, SelectProps,
{ {
change: CustomEvent<string | number>; input: CustomEvent<string | number>;
input: WindowEventMap["input"]; change: WindowEventMap["change"];
focus: WindowEventMap["focus"]; focus: WindowEventMap["focus"];
blur: WindowEventMap["blur"]; blur: WindowEventMap["blur"];
}, },