},
menuStyle: {
borderRadius: '3px',
@@ -475,6 +480,7 @@ class Autocomplete extends React.Component {
}
const menu = this.props.renderMenu(items, this.props.value, style)
return React.cloneElement(menu, {
+ key: 'autocomplete:menu',
ref: e => this.refs.menu = e,
// Ignore blur to prevent menu from de-rendering before we can process click
onTouchStart: () => this.setIgnoreBlur(true),
@@ -570,32 +576,44 @@ class Autocomplete extends React.Component {
const { inputProps } = this.props
const open = this.isOpen()
- return (
-
- {this.props.renderInput({
- ...inputProps,
- role: 'combobox',
- 'aria-autocomplete': 'list',
- 'aria-expanded': open,
- autoComplete: 'off',
- ref: this.exposeAPI,
- onFocus: this.handleInputFocus,
- onBlur: this.handleInputBlur,
- onChange: this.handleChange,
- onKeyDown: this.composeEventHandlers(this.handleKeyDown, inputProps.onKeyDown),
- onClick: this.composeEventHandlers(this.handleInputClick, inputProps.onClick),
- value: this.props.value,
- })}
- {open && this.renderMenu()}
- {this.props.debug && (
-
- {JSON.stringify(this._debugStates.slice(Math.max(0, this._debugStates.length - 5), this._debugStates.length), null, 2)}
-
- )}
-
- )
+ const input = this.props.renderInput({
+ ...inputProps,
+ role: 'combobox',
+ 'aria-autocomplete': 'list',
+ 'aria-expanded': open,
+ autoComplete: 'off',
+ ref: this.exposeAPI,
+ onFocus: this.handleInputFocus,
+ onBlur: this.handleInputBlur,
+ onChange: this.handleChange,
+ onKeyDown: this.composeEventHandlers(this.handleKeyDown, inputProps.onKeyDown),
+ onClick: this.composeEventHandlers(this.handleInputClick, inputProps.onClick),
+ value: this.props.value,
+ })
+
+ const menu = open ? this.renderMenu() : null
+
+ const debug = this.props.debug ? (
+
+ {JSON.stringify(this._debugStates.slice(Math.max(0, this._debugStates.length - 5), this._debugStates.length), null, 2)}
+
+ ) : null
+
+ if (this.props.wrapper) {
+ return (
+
+ {input}
+ {menu}
+ {debug}
+
+ )
+ } else {
+ return [input, menu, debug]
+ }
}
}
module.exports = Autocomplete
-