diff --git a/docs/app/Examples/modules/Dropdown/Types/AllowAdditions.js b/docs/app/Examples/modules/Dropdown/Types/AllowAdditions.js index 86dae54f7f..a14c68084b 100644 --- a/docs/app/Examples/modules/Dropdown/Types/AllowAdditions.js +++ b/docs/app/Examples/modules/Dropdown/Types/AllowAdditions.js @@ -65,6 +65,7 @@ export default class AllowAdditionsExample extends Component { onAddItem={this.handleAdditionMultiple} onChange={this.handleChangeMultiple} /> + Using additionPosition='top' additionLabel='' ) diff --git a/src/modules/Dropdown/Dropdown.js b/src/modules/Dropdown/Dropdown.js index dc981798e3..6b155c5935 100644 --- a/src/modules/Dropdown/Dropdown.js +++ b/src/modules/Dropdown/Dropdown.js @@ -495,19 +495,9 @@ export default class Dropdown extends Component { // open search dropdown on search query if (search && newQuery && !open) this.open() - // resize the search input, temporarily show the sizer so we can measure it - let searchWidth - if (newQuery) { - const sizer = findDOMNode(this.refs.sizer) - sizer.style.display = 'inline' - searchWidth = Math.ceil(sizer.getBoundingClientRect().width) - sizer.style.removeProperty('display') - } - this.setState({ selectedIndex: 0, searchQuery: newQuery, - searchWidth, }) } @@ -722,9 +712,20 @@ export default class Dropdown extends Component { renderSearchInput = () => { const { search } = this.props - const { searchQuery, searchWidth } = this.state + const { searchQuery } = this.state + + if (!search) return null + + // resize the search input, temporarily show the sizer so we can measure it + let searchWidth + if (this._sizer && searchQuery) { + this._sizer.style.display = 'inline' + this._sizer.textContent = searchQuery + searchWidth = Math.ceil(this._sizer.getBoundingClientRect().width) + this._sizer.style.removeProperty('display') + } - return !search ? null : ( + return ( { - const { search } = this.props - const { searchQuery } = this.state + const { search, multiple } = this.props + + if (!(search && multiple)) return null - return !search ? null : {searchQuery} + return (this._sizer = c)} /> } renderLabels = () => {