fix(Dropdown): fix key handling for options (#1639)

* refactor(DropdownItem): provide static create method Fixes "key" prop not being respected on options provided to <Dropdown /> * fix(Dropdown): prefer item.key when rendering labels
Semantic-Org · May 10, 2017 · a9e8870 · a9e8870
1 parent 444fcef
commit a9e8870
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 15 deletions.
diff --git a/src/modules/Dropdown/Dropdown.js b/src/modules/Dropdown/Dropdown.js
@@ -1058,8 +1058,8 @@ export default class Dropdown extends Component {
     return (
       <select type='hidden' aria-hidden='true' name={name} value={value} multiple={multiple}>
         <option value='' />
-        {_.map(options, option => (
-          <option key={option.value} value={option.value}>{option.text}</option>
+        {_.map(options, (option, i) => (
+          <option key={option.key || option.value} value={option.value}>{option.text}</option>
         ))}
       </select>
     )
@@ -1124,7 +1124,7 @@ export default class Dropdown extends Component {
       const defaultProps = {
         active: item.value === selectedLabel,
         as: 'a',
-        key: item.value,
+        key: item.key || item.value,
         onClick: this.handleLabelClick,
         onRemove: this.handleLabelRemove,
         value: item.value,
@@ -1150,17 +1150,14 @@ export default class Dropdown extends Component {
       ? optValue => _.includes(value, optValue)
       : optValue => optValue === value
 
-    return _.map(options, (opt, i) => (
-      <DropdownItem
-        key={`${opt.value}-${i}`}
-        active={isActive(opt.value)}
-        onClick={this.handleItemClick}
-        selected={selectedIndex === i}
-        {...opt}
-        // Needed for handling click events on disabled items
-        style={{ ...opt.style, pointerEvents: 'all' }}
-      />
-    ))
+    return _.map(options, (opt, i) => DropdownItem.create({
+      active: isActive(opt.value),
+      onClick: this.handleItemClick,
+      selected: selectedIndex === i,
+      ...opt,
+      // Needed for handling click events on disabled items
+      style: { ...opt.style, pointerEvents: 'all' },
+    }))
   }
 
   renderMenu = () => {

diff --git a/src/modules/Dropdown/DropdownItem.js b/src/modules/Dropdown/DropdownItem.js
@@ -6,6 +6,7 @@ import React, { Component } from 'react'
 import {
   childrenUtils,
   createShorthand,
+  createShorthandFactory,
   customPropTypes,
   META,
   getElementType,
@@ -20,7 +21,7 @@ import Label from '../../elements/Label'
 /**
  * An item sub-component for Dropdown component.
  */
-export default class DropdownItem extends Component {
+class DropdownItem extends Component {
   static propTypes = {
     /** An element type to render as (string or function). */
     as: customPropTypes.as,
@@ -162,3 +163,7 @@ export default class DropdownItem extends Component {
     )
   }
 }
+
+DropdownItem.create = createShorthandFactory(DropdownItem, opts => opts)
+
+export default DropdownItem
diff --git a/test/specs/modules/Dropdown/DropdownItem-test.js b/test/specs/modules/Dropdown/DropdownItem-test.js
@@ -13,6 +13,7 @@ describe('DropdownItem', () => {
   common.propKeyOnlyToClassName(DropdownItem, 'selected')
   common.propKeyOnlyToClassName(DropdownItem, 'active')
 
+  common.implementsCreateMethod(DropdownItem)
   common.implementsIconProp(DropdownItem)
   common.implementsLabelProp(DropdownItem)
   common.implementsImageProp(DropdownItem)