rob-balfre / svelte-select

Svelte Select. A select component for Svelte
https://svelte-select-examples.vercel.app
Other
1.25k stars 175 forks source link

handleClear and handleMultiClear behave differently. handleClear runs the clear event with the Select's value before the clear. HandleMultiClear the value after the clear. #604

Open mattdam opened 1 year ago

mattdam commented 1 year ago

The Clear event fires before the item has been cleared. There is no event that fires after the item has been cleared. It seems like the change event should fire after the clear has been completed as the value of the dropdown has changed.

My use case would be to create cascading dropdowns and I would like to update the second dropdown anytime there is a change in the value of the first dropdown.

There is a current workaround. I can clear the value of the first dropdown in my handling of the Clear event or I can just not depend the value of the dropdown in the Clear event. In the case of single select, the value will end up being undefined after the clear occurs, so i can just treat it as undefined when populating the second dropdown.

Ideally the Change event would execute every time the value changes, not just when a value is selected. That way I can just handle changes in one way, instead of having to handle the Change event as expected and the Clear event in a different less than ideal way.

rob-balfre commented 1 year ago

@mattdam can you supply an example REPL of what you're trying to achieve please. Thanks.

mattdam commented 1 year ago

https://svelte.dev/repl/dbdae8005d9d4e99a404e30eac2f7d0b?version=3.59.1

It's even more clear that this is a difference in functionality between the single clear and multiclear functions, if you look at a multiselect example. If you select items and remove them with the individual clear links, when the Clear event runs the Select's value reflects that an item has been removed. If you do the same, but you use the Select's clear button, the Clear event shows the value before removing the cleared items.

the handleMultiItemClear function gets a copy of the itemToRemove, updates the value, then dispatches the clear event. handleClear should be updated to do the same. The first two lines should be flipped (also value would need to be preserved so it can be sent in the event args).

export function handleClear() {
    dispatch('clear', value);
    value = undefined;
    closeList();
    handleFocus();
}
rob-balfre commented 1 year ago

@mattdam thanks. Makes sense to dispatch after value is cleared. Will update.