hperrin / svelte-material-ui

Svelte Material UI Components
https://sveltematerialui.com/
Apache License 2.0
3.27k stars 287 forks source link

Can't filter a table through an Autocomplete field #626

Closed melijimenez11 closed 9 months ago

melijimenez11 commented 9 months ago

Describe the bug I'm trying to filter a table using an Autocomplete field. When the user selects a value in Autocomplete, the filtering function isn't working correctly.

To Reproduce Steps to reproduce the behavior:

  1. Go to '...' to look at the issue more closely
  2. Select an option from the autocomplete field

Expected behavior The table should display the rows that contain the selected value

Screenshots If applicable, add screenshots to help explain your problem.

hperrin commented 9 months ago

There are some issues with your code.

Your filter function is not actually returning a value, so it will always filter everything out.

You are both filtering from and assigning the result to filteredProjects, which means that once you filter something, it will be filtered out forever. Instead, you should have a const called projects that you filter and assign to filteredProjects.

The SMUIAutocomplete:selected event fires before the value is updated, so that it can be cancelled. Instead of listening for the event, you should use a reactive variable.

Here is a version with these issues fixed: https://svelte.dev/repl/5a0e70aca6df44a085bfd3d05f943b53?version=4.2.1