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 = () => {