feat(Dropdown): support disabled items

docs/app/Examples/modules/Dropdown/States/DisabledItem.js

@@ -0,0 +1,15 @@
+import _ from 'lodash'
+import faker from 'faker'
+import React from 'react'
+import { Dropdown } from 'stardust'
+
+const options = _.times(10, (i) => {
+  const name = faker.name.findName()
+  return { text: name, value: _.snakeCase(name), disabled: i % 3 === 0 }
+})
+
+const DropdownItemDisabledExample = () => (
+  <Dropdown text='Dropdown' options={options} />
+)
+
+export default DropdownItemDisabledExample

docs/app/Examples/modules/Dropdown/index.js

@@ -43,9 +43,14 @@ const DropdownExamples = () => (
     <ExampleSection title='States'>
       <ComponentExample
         title='Disabled'
-        description='A disabled dropdown menu or item does not allow user interaction'
+        description='A disabled dropdown menu does not allow user interaction'
         examplePath='modules/Dropdown/States/Disabled'
       />
+      <ComponentExample
+        title='Disabled Item'
+        description='A disabled dropdown item does not allow user interaction'
+        examplePath='modules/Dropdown/States/DisabledItem'
+      />
     </ExampleSection>
   </div>
 )

src/modules/Dropdown/Dropdown.js

@@ -385,10 +385,10 @@ export default class Dropdown extends Component {
 
   selectHighlightedItem = (e) => {
     const { multiple, onAddItem, options } = this.props
-    const value = _.get(this.getSelectedItem(), 'value')
+    const { value, disabled } = this.getSelectedItem() || {}
 
-    // prevent selecting null if there was no selected item value
-    if (!value) return
+    // prevent selecting null (if there was no selected item value) or disabled options
+    if (!value || disabled) return
 
     // notify the onAddItem prop if this is a new value
     if (onAddItem && !_.some(options, { text: value })) onAddItem(value)
@@ -458,14 +458,17 @@ export default class Dropdown extends Component {
     debug('handleItemClick()')
     debug(value)
     const { multiple, onAddItem, options } = this.props
+    const item = this.getItemByValue(value) || {}
 
     // prevent toggle() in handleClick()
     e.stopPropagation()
-    // prevent closeOnDocumentClick() if multiple
-    if (multiple) {
+    // prevent closeOnDocumentClick() if multiple or item is disabled
+    if (multiple || item.disabled) {
       e.nativeEvent.stopImmediatePropagation()
     }
 
+    if (item.disabled) return
+
     // notify the onAddItem prop if this is a new value
     if (onAddItem && !_.some(options, { value })) onAddItem(value)
 
@@ -631,13 +634,19 @@ export default class Dropdown extends Component {
     const options = this.getMenuOptions()
     const lastIndex = options.length - 1
 
+    // Prevent infinite loop
+    if (_.every(options, 'disabled')) return
+
     // next is after last, wrap to beginning
     // next is before first, wrap to end
     let nextIndex = selectedIndex + offset
     if (nextIndex > lastIndex) nextIndex = 0
     else if (nextIndex < 0) nextIndex = lastIndex
 
     this.setState({ selectedIndex: nextIndex })
+
+    if (options[nextIndex].disabled) return this.moveSelectionBy(offset)
+
     this.scrollSelectedItemIntoView()
   }
 
@@ -819,6 +828,7 @@ export default class Dropdown extends Component {
         selected={selectedIndex === i}
         onMouseDown={e => e.preventDefault()} // prevent default to allow item select without closing on blur
         {...opt}
+        style={{ ...opt.style, pointerEvents: 'all' }} // Needed for handling click events on disabled items
       />
     ))
   }

src/modules/Dropdown/DropdownItem.js

@@ -16,6 +16,7 @@ function DropdownItem(props) {
     active,
     children,
     className,
+    disabled,
     description,
     icon,
     onClick,
@@ -30,6 +31,7 @@ function DropdownItem(props) {
 
   const classes = cx(
     useKeyOnly(active, 'active'),
+    useKeyOnly(disabled, 'disabled'),
     useKeyOnly(selected, 'selected'),
     'item',
     className,
@@ -78,6 +80,9 @@ DropdownItem.propTypes = {
   /** Additional text with less emphasis. */
   description: PropTypes.string,
 
+  /** A dropdown item can be disabled. */
+  disabled: PropTypes.bool,
+
   /** Add an icon to the item. */
   icon: PropTypes.string,
 

test/specs/modules/Dropdown/Dropdown-test.js

@@ -125,6 +125,22 @@ describe('Dropdown Component', () => {
         .simulate('click')
         .should.have.prop('selected', true)
     })
+    it('is ignored when clicking a disabled item', () => {
+      // random item, skip the first as its selected by default
+      const randomIndex = 1 + _.random(options.length - 2)
+      const nativeEvent = { nativeEvent: { stopImmediatePropagation: _.noop } }
+
+      options[randomIndex].disabled = true
+
+      wrapperMount(<Dropdown options={options} selection />)
+        .simulate('click', nativeEvent)
+        .find('DropdownItem')
+        .at(randomIndex)
+        .simulate('click', nativeEvent)
+        .should.have.not.prop('selected', true)
+
+      dropdownMenuIsOpen()
+    })
     it('moves down on arrow down when open', () => {
       wrapperMount(<Dropdown options={options} selection />)
 
@@ -193,6 +209,29 @@ describe('Dropdown Component', () => {
         .find('.selected')
         .should.contain.text('a2')
     })
+    it('skips over disabled items', () => {
+      const opts = [
+        { text: 'a1', value: 'a1' },
+        { text: 'skip this one', value: 'skip this one', disabled: true },
+        { text: 'a2', value: 'a2' },
+      ]
+      // search for 'a'
+      wrapperMount(<Dropdown options={opts} search selection />)
+        .simulate('click')
+        .find('input.search')
+        .simulate('change', { target: { value: 'a' } })
+
+      wrapper
+        .find('.selected')
+        .should.contain.text('a1')
+
+      // move selection down
+      domEvent.keyDown(document, { key: 'ArrowDown' })
+
+      wrapper
+        .find('.selected')
+        .should.contain.text('a2')
+    })
     it('scrolls the selected item into view', () => {
       // get enough options to make the menu scrollable
       const opts = getOptions(20)
@@ -260,6 +299,23 @@ describe('Dropdown Component', () => {
 
       item.should.have.prop('active', true)
     })
+    it('does not become active on enter when disabled', () => {
+      const disabledOptions = _.map(options, (o) => ({ ...o, disabled: true }))
+      const item = wrapperMount(<Dropdown options={disabledOptions} selection />)
+        .simulate('click')
+        .find('DropdownItem')
+        .at(0)
+
+      // initial item props
+      item.should.have.prop('selected', true)
+      item.should.have.prop('active', false)
+
+      // attempt to make active
+      domEvent.keyDown(document, { key: 'Enter' })
+
+      item.should.have.prop('active', false)
+      dropdownMenuIsOpen()
+    })
     it('closes the menu', () => {
       wrapperMount(<Dropdown options={options} selection />)
         .simulate('click')