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

Override showing of placeholder on Multiple Input selection #684

Closed
happysomani opened this issue Jan 11, 2022 · 8 comments
Closed

Override showing of placeholder on Multiple Input selection #684

happysomani opened this issue Jan 11, 2022 · 8 comments

Comments

@happysomani
Copy link

Is your feature request related to a problem? Please describe.
I would like to show a placeholder in the input even if a user has selected a few items previously. Currently in the code here the code clears out the placeholder text if the length of the selected items is greater than zero.

But for e.g. The default placeholder text could be "Search for states..." when there is no state selected. Once a user has some state selected in the typeahead box, I may want to update the placeholder text to something like "Search for additional states"

Describe the solution you'd like
Provide an override prop that would always show the placeholder regardless whether the number of selected items is zero or not.

How is this solution useful to others?
Others may be able to also use the placeholder to provide more context to the users using the typeahead.

Describe alternatives you've considered
None.

Additional context
The feature would show up something like this

image

@happysomani
Copy link
Author

@ericgio can you please help review the above feature request 🙏 ?

@ericgio
Copy link
Owner

ericgio commented Jan 19, 2022

Hi @happysomani, thank you for the feature request. It's a reasonable one; I think the best approach would be to move the placeholder logic up to the main Typeahead component. That would allow developers like yourself to render the multi-select input using renderInput and have control over the placeholder value.

@happysomani
Copy link
Author

I may not have understood your recommendation around the implementation approach. Can you please explain in slightly more detail please?

@ericgio
Copy link
Owner

ericgio commented Jan 19, 2022

@happysomani: Sorry for not being clear, my comment was mostly a note to myself. I'm suggesting moving the line you highlighted up to here. That would keep the current behavior by default, but allow you to use the TypeaheadInputMulti component along with renderInput to customize the behavior.

@happysomani
Copy link
Author

I can make the change and submit a pull request if you would prefer that.

@harrylepotter-win
Copy link

@happysomani also interested in this functionality

@ColinGoldie
Copy link

This would greatly enhance usability. +1 from me!!!!

@ericgio
Copy link
Owner

ericgio commented Jun 3, 2022

Fixed in v6.0.0-rc.1. You can override the default behavior using renderInput:

<Typeahead
  ...
  renderInput={(inputProps) => (
    <TypeaheadInputMulti {...inputProps} />
  )}
/>

@ericgio ericgio closed this as completed Jun 3, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants