diff --git a/src/modules/Dropdown/Dropdown.js b/src/modules/Dropdown/Dropdown.js
index 5e4fd12e98..d1650e16ca 100644
--- a/src/modules/Dropdown/Dropdown.js
+++ b/src/modules/Dropdown/Dropdown.js
@@ -759,15 +759,16 @@ export default class Dropdown extends Component {
// insert the "add" item
if (allowAdditions && search && searchQuery && !_.some(filteredOptions, { text: searchQuery })) {
const additionLabelElement = React.isValidElement(additionLabel)
- ? React.cloneElement(additionLabel, { key: 'label' })
+ ? React.cloneElement(additionLabel, { key: 'addition-label' })
: additionLabel || ''
const addItem = {
+ key: 'addition',
// by using an array, we can pass multiple elements, but when doing so
// we must specify a `key` for React to know which one is which
text: [
additionLabelElement,
- {searchQuery},
+ {searchQuery},
],
value: searchQuery,
className: 'addition',
diff --git a/test/specs/modules/Dropdown/Dropdown-test.js b/test/specs/modules/Dropdown/Dropdown-test.js
index 539abed87b..c40ecae213 100644
--- a/test/specs/modules/Dropdown/Dropdown-test.js
+++ b/test/specs/modules/Dropdown/Dropdown-test.js
@@ -1970,7 +1970,7 @@ describe('Dropdown', () => {
.prop('text')
expect(text[0]).to.equal('Add ')
- shallow(text[1]).equals(boo)
+ shallow(text[1]).equals(boo)
})
it('uses custom additionLabel string', () => {
@@ -1995,7 +1995,7 @@ describe('Dropdown', () => {
.prop('text')
expect(text[0]).to.equal('New: ')
- shallow(text[1]).equals(boo)
+ shallow(text[1]).equals(boo)
})
it('uses custom additionLabel element', () => {
@@ -2020,7 +2020,7 @@ describe('Dropdown', () => {
.prop('text')
shallow(text[0]).equals(New: )
- shallow(text[1]).equals(boo)
+ shallow(text[1]).equals(boo)
})
it('uses no additionLabel', () => {
@@ -2045,7 +2045,7 @@ describe('Dropdown', () => {
.prop('text')
expect(text[0]).to.equal('')
- shallow(text[1]).equals(boo)
+ shallow(text[1]).equals(boo)
})
it('keeps custom value option (bottom) when options change', () => {