Don't return a div but just an array (React 16)

[marcelhageman]

Right now I can't do this in CSS:

input:focus + label { color: red; }

Because the output for the react-autocomplete contains the input element inside a div.

Instead, I'd like to be able to output only an input element and render it right beside a label, so I can focus the input field and style the next sibling label element accordingly.

Since React 16 I believe you can also render as follows:

const renderAutocomplete = [
  {this.props.renderInput(...)},
  {open && this.renderMenu()},
  {this.props.debug && ...}
];

You'd need to provide a key attribute to each child.

The containing div could be skipped since it offers no functional meaning, you could make it the default for old-times sake.

const { renderWrapper } = this.props;

return (
  renderWrapper
    ? <div style={{ ...this.props.wrapperStyle }} {...this.props.wrapperProps}>
        {renderAutocomplete}
      </div>
    : renderAutocomplete
);

Thoughts?

[CMTegner]

Sure! At some point we'll drop support for React <16 and this will be how the component functions, but until then this is a good compromise. Create a PR and I'll review it as soon as I have time.