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

Hide create new option prompt text when input is empty/reset/cleared #1575

Closed
kukikiloke opened this issue Feb 22, 2017 · 10 comments
Closed

Comments

@kukikiloke
Copy link

Preconditions:

  • multi: true
  • createable: true

Steps:

  1. Type something which will show some of the options, select any of the options.
  2. Input is cleared on selecting option but the prompt text Create an option "xxx" is still there when you focus on the field. The same happens when you type something and click outside of the select container (blur) and focus on it again.

It would be great if the prompt text Create an option "xxx" will not display when the input is empty/reset/cleared as it's kinda strange to display suggestion to create new option when there is nothing in the input. Thanks!

@slavab89
Copy link

slavab89 commented Mar 4, 2017

+1

1 similar comment
@shoaibbhimani
Copy link

+1

@tonisostrat
Copy link

tonisostrat commented Mar 9, 2017

A quick (and dirty?) workaround currently is to manually delete the internal placeholder item whenever onChange() fires.

Here's an example using a stateless component:

export default props => {
  let ref;

  return (<Select.Creatable ref={el => ref = el}
                            onChange(values => {
                              delete ref._createPlaceholderOption;
                              //resume handling the values
                            }/>)
}

@shoaibbhimani
Copy link

shoaibbhimani commented Mar 9, 2017

@tonisostrat why not simply hide element based on its class
.Select-menu-outer .Select-create-option-placeholder {
display: none;
}

@tonisostrat
Copy link

tonisostrat commented Mar 9, 2017

Because that only hides it visually. It's still persisted inside the <Select/> and may affect the behaviour of the whole field in regards to filtering the drop-down and item creation/selection.

@dmitrykuznetsovdev
Copy link

+1

1 similar comment
@thejjmiller
Copy link

+1

@lorenzos
Copy link

+1!

@tonisostrat Your workaround doesn't work for me :(

@lorenzos
Copy link

To me, this is fixed with #1306. Close?

@bladey
Copy link
Contributor

bladey commented May 27, 2020

Hello -

In an effort to sustain the react-select project going forward, we're closing old issues / pull requests.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our limited efforts to maintain the latest version.

If you feel this issue / pull request is still relevant and you'd like us to review it, please leave a comment and we'll do our best to get back to you.

@bladey bladey closed this as completed May 27, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

8 participants