Add `on search text changed` event for multi-select component

[withshubh]

What is the expected behaviour?

In multi-select component, we can search options by typing in the component but there is no event handler for on search text changed

What is the current behaviour?

We should have an event on search text changed for multi-select component (similar to the dropdown component)

How to reproduce the issue?

1. Drag the multi-select component
2. add an event handler and check the event available
3. drag the dropdown component and check its available events

Screenshots or Screencast

[harshmange44]

@withshubh Hey, I'd like to work on this.

[withshubh]

Hey @harshmange44 - Assigned to you.

[alceil]

Can I work on this issue @withshubh ?

[Mish2j]

Hi There, I'd like to work on this issue.

[withshubh]

Hi @alceil & @Mish2j Thanks for showing interest in contributing to ToolJet. @alceil - Are you still interested in this issue? Or we can assign this issue to @Mish2j

[alceil]

Im working on other issue as of now and facing some problems trying to run the project locally. Anyways you can assign this issue to @Mish2j i dont mind

[withshubh]

Alright, @alceil Thanks for the update. Feel free to ask questions in our Slack community.

Assigned this issue to you - @Mish2j

[Mish2j]

Update on this! So the MultiSelect component that you are currently using is imported from react-multi-select-component which doesn't allow to pass a prop that will handle search input changes. The only way to make on search text changed event work on this component is to override the default method that filters search input see here. What I did is copy pasted the original filterOptions function and added fireEvent('onSearchTextChanged') inside the function (something like this though this is not the final working code). This worked beacuse every time search input changes the filterOption is executed. However, this was not working as efficient as Dropdown on search text changed event. Another option is to use the Select component that react-select provides (the same component that you are using for Dropdown) and customize it which is what I'm doing now and almost done. Let me know what you think and would you consider this solution?