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