Multi-select onChange: How to determine which items were added/removed when options change dynamically?

[t-muehlberger]

Hello, I am currently trying to build a control for a filter element. It should allow searching the available filters using a text input. A dropdown should show matching filters and allow users to check one or more filtering options. All in all, a pretty standard filter element as you might see it on many websites.

I am using the Search component since we are loading filter values async from the server, and I read in a different issue that the Search component is recommended for async data over the Combobox component.

Where I am running into limitations with the component is the onChange callback. It only gives me an array of currently selected options. But what I am missing is the information on which options have been checked or unchecked, triggering the change.

My current approach is to try to diff available options and selected options to find out what options have been added or removed from the selection. Now this gets complex quickly, and with async data fetching is probably also very prone to race conditions.

Is there a recommended approach for this use case?