fix(Dropdown): add addition item key (#1727)

Semantic-Org · Jun 1, 2017 · bcc9482 · bcc9482
1 parent 5539d49
commit bcc9482
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
diff --git 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,
-          <b key='addition'>{searchQuery}</b>,
+          <b key='addition-query'>{searchQuery}</b>,
         ],
         value: searchQuery,
         className: 'addition',

diff --git 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(<b key='addition'>boo</b>)
+      shallow(text[1]).equals(<b key='addition-query'>boo</b>)
     })
 
     it('uses custom additionLabel string', () => {
@@ -1995,7 +1995,7 @@ describe('Dropdown', () => {
         .prop('text')
 
       expect(text[0]).to.equal('New: ')
-      shallow(text[1]).equals(<b key='addition'>boo</b>)
+      shallow(text[1]).equals(<b key='addition-query'>boo</b>)
     })
 
     it('uses custom additionLabel element', () => {
@@ -2020,7 +2020,7 @@ describe('Dropdown', () => {
         .prop('text')
 
       shallow(text[0]).equals(<i key='label'>New: </i>)
-      shallow(text[1]).equals(<b key='addition'>boo</b>)
+      shallow(text[1]).equals(<b key='addition-query'>boo</b>)
     })
 
     it('uses no additionLabel', () => {
@@ -2045,7 +2045,7 @@ describe('Dropdown', () => {
         .prop('text')
 
       expect(text[0]).to.equal('')
-      shallow(text[1]).equals(<b key='addition'>boo</b>)
+      shallow(text[1]).equals(<b key='addition-query'>boo</b>)
     })
 
     it('keeps custom value option (bottom) when options change', () => {