Reference to input

This is not a feature request per se, but I cannot seem to find this in the documentation. I have also asked a question about this on SO.

How do I get a reference to the input element so I can .select() the text inside of it?

[ebonow]

@artooras Here is your solution.

@manualva7 100% incorrect. Here is the working “solution” that you said isn’t possible: https://codesandbox.io/s/react-select-editable-and-selectable-6nfdv

Please consider reading before refuting so assuredly what’s possible and not possible in the future.

To set the record straight, the fact is that React-Select DOES render an Input (when the searchable prop is true). What also does happen is that the opacity is set to 0 based on whether or not it thinks it should display based on a isHidden prop sent to the Input component (see here for the implementation) What we need to do is keep it visible and do away with the SingleValue/MultiValues with the controlShouldRenderValue prop.

If you care to learn, here are some of the other “suggested” approaches that could/should have resolved this with hopes that either someone can point out where proposed solution #1 went wrong or to push for making this a much easier internal solution (autoHideInput to override default behavior, editableInput which could manage these state changes internally, easier to override styling, etc…)

Custom Component: (Does not work today for me on my computer)

const Input = inputProps => <components.Input {...inputProps} isHidden={false} />

<Select components={{Input}} ...>

Creating a Custom Component for Input should work, but when testing today, the controlled component seems to be re-rendering the input on every keypress which results in losing focus and winds up setting the document.activeElement to body instead of the input. I am not sure what changed between testing locally on some existing React-Selects and today’s Sandbox, but I had to remove it.

Custom Styling: (Does not work)

styles = { input: css => ({ ...css, opacity: 1 })
<Select styles={{styles}} ...>

Theoretically, this should also work, but the way the Input component was written, overwrites the opacity style based on the prop isHidden which is sent to the Input.

CSS: (Works)

.react-select---editable .react-select__input input { opacity: 1 !important }

<Select className="react-select--editable" classNamePrefix="react-select" ...>

I understand specificity and the stigma around !important but it exists for reasons like this; that being a 3rd party library with no apparent alternatives to overwriting inline styles which affect the desired behavior.

That said, I appreciate having a community so we can help solve similar problems. It’s why we are all here. It’s just not helpful when so much free time is taken to help others only to blindly discredit the methodology and approach without any thought for what you might be missing.

I’ve built some cool stuff with this tool there’s still a lot that I’ve learned just this past weekend. Looking forward to building more tools and community together.

[artooras]

Thanks @ebonow . Is the following

Select: ref.current.select.inputRef.select() Createable or Async: ref.current.select.select.inputRef.select() Createable Async: ref.current.select.select.select.inputRef.select()

documented anywhere? Because I think it should be 😃

In my case, I ended up using a workaround which, though may not be entirely correct, works for me quite reliably. This is based on the assumption that when I call focus() on the react-select, the input that is in focus in document is that of react-select:

ref.current.focus()
document.activeElement?.select()