moroshko
Adds note about forwarding ref on custom inputs
Hello! Thanks for your library. We had to add a forward ref to get react-autosuggest to work with a custom input component. This PR adds this requirement to the docs in the readme. Thanks again!
@ashfurrow when I try your example I get:
Warning: Failed prop type: Invalid prop `renderInputComponent` of type `object` supplied to `Autosuggest`, expected `function`.
Does your example really work? What versions of react and react-autosuggest did you use?
I currently get the following warning when implementing a simple renderInputComponent function:
Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
@ctavan I'm using react-autosuggest v9.4.3 and react v16.5.0. If you look at the diff that I linked to above, you'll see the change we had to make to our function components – our renderInputComponent is here as well. Good luck!
@ashfurrow thanks for the pointers!
I also figured out from the commits that you referenced how to make it work. However I believe that the example you added to the documentation won't work as is since it leads to the error message I mentioned above (React.forwardRef() creates an object but the renderInputComponent prop of react-autosuggest only accepts a function).
To make it work I had to do something like this:
const CustomInput = React.forwardRef((props, ref) => (
<div>
<input {...props} ref={ref} />
<div>custom stuff</div>
</div>
));
const renderInputComponent = props => <CustomInput {...props} />;
An alternative would be to make react-autosuggest accept anything that react can render in the renderInputComponent prop…
Oh, I see the confusion – I named the component renderInputComponent but it's not passed in directly to react-autosuggest, but is in fact created as a functional component (as in your example).
@ctavan do you want to suggest some inline changes to this PR? That way you'd get credit in the commits for this clarification 👍
I think I am having the same issue.
const renderInputComponent = (inputProps) => (
<div className="inputContainer">
<FontAwesomeIcon
icon={faAngleDown}
size={'1x'}
// onClick={() => {
// autosuggestInput.current.focus();
// }}
/>
{/*<input {...inputProps} ref={autosuggestInput} />*/}
<input {...inputProps} />
</div>
);
Once I add in the commented code, I get this error:
TypeError: _this.input is undefined Autosuggest/< .../node_modules/react-autosuggest/dist/Autosuggest.js:204
All I'm trying to do is get all the options to show when the dropdown caret arrow is clicked.
