Adds note about forwarding ref on custom inputs

[ashfurrow]

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!

[ctavan]

@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()?

[ashfurrow]

@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!

[ctavan]

@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…

[ashfurrow]

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 👍

[mdodge-ecgrow]

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.