Clicking the 'X' to clear the search, does not reset the list

[jameslieu]

Description

When clearing the search filter, as a user I would expect the list to also be restored to what it was prior to searching.

Screenshots

No response

Additional information

No response

[jameslieu]

I had a go at fixing this, but I've found an issue.

The input field has a type="search" which is where that "clear" button comes from. That button triggers a "search" event.

When applying this, while it works and correctly listens to the event, the Svelte language tool doesn't support this type, and so the svelte-check will return an error.

I've opened a PR on the svelte/language-tools repository: sveltejs/language-tools#1550
But ended up closing it because the "search" event is non-standard, and will not work in some browsers:

So you have three possible options:

Option 1:

You can enhance the typing yourself by creating a .d.ts file and make sure this file is included in your tsconfig/jsconfig:

declare namespace svelte.JSX {
    interface DOMAttributes<T extends EventTarget> {
        onsearch?: EventHandler<Event, T> | undefined | null;
    }
}

Then listen for the event to trigger the performSearch() function, but bearing in mind that it may not be supported in multiple browsers. It also looks like there will be a change coming which will break this and you will need to update this. See the comment in my PR for more info: sveltejs/language-tools#1550

Option 2:

You can change the input field type to type="text" so the "X" no longer appears and you lose the "clear" fuctionality.
This option is the easiest.

Option 3:

You can change the input field type to type="text", and introduce a separate button which can listen for a on:click event and you clear the list.

---

Option 2 or 3 is probably the most viable but means changing the UI/UX slightly. What are your thoughts?

[Dharmik48]

This issue is similar to #106

[jameslieu]

No response or activity on this also, as mentioned, it is a duplicate of #106

I'll close this as well.