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

How to override `handleClear()`? (Or alternative approach suggestion) #605

Open stv8 opened 1 year ago

stv8 commented 1 year ago

Hello! Apologies if this is a dumb question as I am still getting accustomed to svelte.

I would like to override handleClear() to additionally prompt the user to confirm they really want to clear the item. If they confirm they do then I would like to call the original handleClear function.

According to your documentation, we should be able to override the handleClear method, however my attempts have been futile.

This is what I have tried:

  function handleClear() {
    console.log('clearing');
  }

...

  <Select {items} multiple {handleClear} />

But it doesn't appear to be overriding. I found this after some brief research

If you export a const, class or function, it is readonly from outside the component. Function expressions are valid props, however.

source

Since handleClear is defined as a function and not a function expression, I think that might preventing me from overriding it.

Is there a way to accomplish this or am I misunderstanding something?

Thanks for your library and work by the way!

rob-balfre commented 1 year ago

@stv8 nice spot, thanks. I'll update to a function expression

stv8 commented 1 year ago

Awesome!

After looking at the source a little further, I realized I actually am looking to hook into handleMultItemClear.

https://github.com/rob-balfre/svelte-select/blob/1d96a9f7906f4a471ae68b778f45865836fe7ea8/src/lib/Select.svelte#L351-L363

Rather than completely overriding it, could it be possible to hook into the call prior to it clearing?

Like I mentioned above, my use case is to prompt the user to confirm they really want to delete an item from a multi item list to prevent erroneous deletes by accidentally clicking backspace etc. So I would like to ultimately keep the original clearing logic of handleMultItemClear to be called when the user confirms.

Of course don't let my one use case drive your design decisions, but let me know if you would like any other input on this one, let me know what you think or if you would like me some assistance.

Cheers

subpx commented 1 year ago

Just to chime in on this one as it is in the same code. The clear event is confusing and seems wrong to me. When removing a single item from a multi select should it not just fire a change event. The user is not clearing the value.