Separate instances of my component are unexpectedly sharing the event handler when searching

Question

I have created a custom component (Searchable Dropdown) which is supposed to take in a List of some items that adhere to the "SearchableDropdownItem" interface and then allow the user to search through those items based on some criteria. In order to allow flexible searching, I've delegated the returning of the search results to the consuming Component/Page.

Anywho, the issue here is that when I search in ONE box, it searches all of them. In my use-case, I have different lists passed into each component, so I don't believe that's the issue.

The expected behavior is only the actual dropdown having search terms typed into it should have the results appear in its respective box.

Here is the working example: https://blazorfiddle.com/s/5829i822

Basically, when I search using one SearchableDropdown, I don't want to have all three of them search at the same time, since in my actual use-case, they're completely different lists containing different data, but they're all getting searched with the same terms when I type into any individual dropdown.

Note: the way I coded this particular minimum example, you have to re-run the program because I'm re-setting the results used for the search -- I did this for the sake of time, if you want to change that for testing purposes, go ahead.

Aside: If you have any general design suggestions for Component design, etc, please feel free.

Answer 1

You can use the sum and avg window functions:

select *, sum(eur) over(partition by ID order by timestamp) as sum_all, 
avg(eur) over(partition by ID order by timestamp) as mean_all
from table_name