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
Reference to input #4039
Comments
Well... |
Would you mind sharing an example of how I can get a ref to the input that is embedded inside the react-select? |
@manualva7 , with all due respect, this is an issue related to react-select, because the input element that I need is internal to react-select. I have done research as much as I could, and I cannot find how to get a reference to that internal input element, hence my question on SO and here. |
If you want to see why I wanted to find a reference to the input element, see the answer on my SO question - someone actually suggested a working solution. I still think it's a bit hacky as it relies on querying for a certain id, which may change, but I'll go with that for now while there isn't a more direct reference to the input element provided. |
@artooras I believe you might be looking for the following answer and also replied to the SO post. While the select reference does support a few methods directly on the input element (focus and blur), it does not expose a select method in the same manner. For that you would need to directly access the inner component input reference which conceptually would look like the following: selectRef -> current (StateManager) -> select(Select Component) -> inputRef (Input Component)
I hope this helps and if so, please consider closing this issue. |
Thanks @ebonow . But with your suggestion I get:
I'm calling it right after
|
@artooras. Sorry for the late reply. I lost my last draft while working on a sandbox solution for you. There are a few things to this....
Select: ref.current.select.inputRef.select()
One of the more asked for requests with React-Select is to expose the inputValue as editable. Here is what I am doing to make this happen which unfortunately involves making React-Select a controlled component. I may take another stab at this by leveraging the StateManager, but for now, this fits my needs.
Then for my CSS I do that following...
|
Here's a version that does not require any extra styling that I tested today found here |
@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 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)
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)
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)
I understand specificity and the stigma around 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. |
Thanks @ebonow . Is the following
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
|
That actually is quite brilliant and simplistic. Are you using a controlled component by passing in the inputValue? Just curious to how you are maintaining a value in the input that could be selected. |
I set |
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?The text was updated successfully, but these errors were encountered: