Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enhancement Request: Missing onChange Event and Server Data Search in SelectBox API #444

Open
sendistephen opened this issue May 10, 2023 · 5 comments · May be fixed by #470
Open

Enhancement Request: Missing onChange Event and Server Data Search in SelectBox API #444

sendistephen opened this issue May 10, 2023 · 5 comments · May be fixed by #470
Labels
Type: Feature New feature for existing component

Comments

@sendistephen
Copy link

I would like to request an enhancement for the SelectBox API. Currently, I have noticed that there is no onChange event available, and I am unable to perform server data searches using the SelectBox component.
Search only works on the client

@amirhhashemi
Copy link
Contributor

amirhhashemi commented May 11, 2023

There is onValueChange event handler which I assume is you are looking for.

@sendistephen
Copy link
Author

Currently, the onValueChange event in the SelectBox only provides the value of the SelectedBoxItem. However, I would like to discuss the possibility of adding an onInputChange event to handle input change events on the SelectBox.

Allow me to illustrate this with an example. Let's say I have an array of tag data obtained from an API. Due to pagination limitations, the API only returns 10 tags per request. However, I want to be able to search for tags on the server. Unfortunately, the current implementation of the SelectBox does not offer a way to achieve this.

If an onInputChange event were available, I could easily type in the SelectBox and have the input value(string) sent to the API for searching purposes.

Here's a code snippet demonstrating the current usage of the SelectBox:

   <SelectBox value={selected} onValueChange={(value) => setSelected(value)}>
           {tags?.map((tag) => (
             <SelectBoxItem key={tag.id} value={tag.id} text={tag.label} />
           ))}
    </StyledSelectBox>

@mitrotasios
Copy link
Member

@sendistephen, thanks for the suggestion. I see the point and think it may be useful in certain cases. The thing is that currently, we cover the entire filtering logic on the client and don't allow for custom filtering (that you could then perform on the server as well). As you noted the onValueChange handler does only reference the currently selected value. A potential implementation would be to add a onInputValueChange handler that "disables" the internal filtering logic and passes that responsibility to the user. Would something like this make sense? We will keep this in mind for our roadmap.

@mitrotasios mitrotasios added the Type: Feature New feature for existing component label May 11, 2023
@rebasedming
Copy link

Seconding this feature request. The inability to detect onInputValueChange is preventing me from using the SelectBox, and as a workaround I had to make my own SelectBox in order to detect what the user is typing. (My use case is that the SelectBox needs to load in tens of thousands of options, which is too many to do at once, so I need to detect the user input and dynamically load in the options).

@juanpmarin
Copy link

This is an important feature for large datasets, where filtering on the client side is not a good practice. This feature is essential for my project too and it would be incredible to have it available

@Lary15 Lary15 mentioned this issue Oct 7, 2023
14 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Feature New feature for existing component
Projects
None yet
5 participants