search

reactjs / react-autocomplete

WAI-ARIA compliant React autocomplete (combobox) component
MIT License
2.17k stars 532 forks source link

Make wrapper-element configurable #314

Open flash1293 opened 6 years ago

flash1293 commented 6 years ago

This PR uses a span as the wrapping element instead of a div. This makes it possible to use the component inside of elements which prohibit the usage of block-elements as children like paragraphs.

Example:

<p><Autocomplete {/*...*/} /></p>

Prodcues the error <div> cannot appear as a descendant of <p>. See ... > Autocomplete > div.

Tests are not adjusted, I will add them tomorrow.

CMTegner commented 6 years ago

Hi Johannes! I think I'd rather wait for something like https://github.com/reactjs/react-autocomplete/issues/298 instead of changing the root node type, as this will likely cause problems for people who rely on the rapper being a <div>. If you feel like having an attempt at implementing the that suggestion it would be greatly appreciated.

flash1293 commented 6 years ago

Fair enough - what about a new prop renderWrapper analogous to renderInput and renderMenu? It would be a function with the parameters wrapperProps, wrapperStyle, renderedInput and renderedMenu, default is something like

return <div style={{wrapperStyle}} {...wrapperProps}>
{renderedInput}
{renderedMenu}
</div>;

Pros:

Would be happy to adjust the PR if you agree.

CMTegner commented 6 years ago

Sounds good! I wonder if maybe we should rather pass in renderInput and renderMenu in addition to isOpen, so you have full control over what you want to render.

flash1293 commented 6 years ago

@CMTegner I added the renderWrapper prop. I'm not sure what you mean by full control. With open, renderMenu, renderInput and now renderWrapper, the user should be in complete control of the render-output.

bitionaire commented 6 years ago

y no merge?