diff --git a/README.md b/README.md index e78523da..b7d4a8ea 100644 --- a/README.md +++ b/README.md @@ -167,6 +167,24 @@ and keyboard navigation logic will break. `styles` will contain { top, left, minWidth } which are the coordinates of the top-left corner and the width of the dropdown menu. +#### `renderMenuWrapper: Function` (optional) +Default value: +```jsx +function(menu) { + return menu; +} +``` + +Arguments: `menu: React element` + +Invoked to generate a wrapper around the menu component. Use this if you +want to create a React Portal around the menu, e.g.: +```jsx +function(menu) { + return createPortal(menu, document.body); +} +``` + #### `selectOnBlur: Boolean` (optional) Default value: `false` diff --git a/lib/Autocomplete.js b/lib/Autocomplete.js index 1658c8bb..de2f2224 100644 --- a/lib/Autocomplete.js +++ b/lib/Autocomplete.js @@ -95,6 +95,14 @@ class Autocomplete extends React.Component { * and the width of the dropdown menu. */ renderMenu: PropTypes.func, + /** + * Arguments: `menu: React element` + * + * Invoked to generate a wrapper around the menu component. Use this if you + * want to create a React Portal around the menu, e.g.: + * `(menu) => createPortal(menu, document.body)` + */ + renderMenuWrapper: PropTypes.func, /** * Styles that are applied to the dropdown menu in the default `renderMenu` * implementation. If you override `renderMenu` and you want to use @@ -175,6 +183,9 @@ class Autocomplete extends React.Component { renderMenu(items, value, style) { return
{JSON.stringify(this._debugStates.slice(Math.max(0, this._debugStates.length - 5), this._debugStates.length), null, 2)} diff --git a/lib/__tests__/Autocomplete-test.js b/lib/__tests__/Autocomplete-test.js index ed5b79fb..da3643a4 100644 --- a/lib/__tests__/Autocomplete-test.js +++ b/lib/__tests__/Autocomplete-test.js @@ -723,6 +723,23 @@ describe('Autocomplete#renderMenu', () => { }) }) +describe('Autocomplete#renderMenuWrapper', () => { + it('should be invoked in `render` to create a wrapper around the menu', () => { + class MenuWrapper extends React.Component { + render() { + return this.props.children + } + } + const tree = mount(AutocompleteComponentJSX({ + renderMenuWrapper(menu) { + return{menu} + } + })) + tree.setState({ isOpen: true }) + expect(tree.find(MenuWrapper).length).toBe(1) + }) +}) + describe('Autocomplete isItemSelectable', () => { const autocompleteWrapper = mount(AutocompleteComponentJSX({ open: true,