fix: disabled items should not be selectable(downshift-js#434) (downs…

…hift-js#436)

* disabled items cannot be selected

* updated react-test-renderer and react-testing-library

* added test for checking selection behaviour of disabled items

* removed comment, used fireEvent instead of Simulate

package.json

@@ -76,8 +76,8 @@
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "react-native": "^0.54.2",
-    "react-test-renderer": "^16.2.0",
-    "react-testing-library": "^1.1.0",
+    "react-test-renderer": "^16.3.2",
+    "react-testing-library": "^2.3.0",
     "serve": "^6.5.3",
     "typescript": "^2.7.2"
   },

src/__tests__/downshift.get-item-props.js

@@ -1,5 +1,11 @@
 import React from 'react'
-import {render, Simulate} from 'react-testing-library'
+import {
+  render,
+  renderIntoDocument,
+  cleanup,
+  Simulate,
+  fireEvent,
+} from 'react-testing-library'
 import Downshift from '../'
 import {setIdCounter} from '../utils'
 
@@ -12,18 +18,19 @@ beforeEach(() => {
 
 afterEach(() => {
   console.error = oldError
+  cleanup()
 })
 
 test('clicking on a DOM node within an item selects that item', () => {
   // inspiration: https://github.com/paypal/downshift/issues/113
-  const items = ['Chess', 'Dominion', 'Checkers']
+  const items = [{item: 'Chess'}, {item: 'Dominion'}, {item: 'Checkers'}]
   const {queryByTestId, renderSpy} = renderDownshift({items})
   const firstButton = queryByTestId('item-0-button')
   renderSpy.mockClear()
   Simulate.click(firstButton)
   expect(renderSpy).toHaveBeenCalledWith(
     expect.objectContaining({
-      selectedItem: items[0],
+      selectedItem: items[0].item,
     }),
   )
 })
@@ -161,32 +168,72 @@ test(`getItemProps doesn't include event handlers when disabled is passed (for I
   }
 })
 
+test(`disabled item can't be selected by pressing enter`, () => {
+  const items = [
+    {item: 'Chess', disabled: true},
+    {item: 'Dominion', disabled: true},
+    {item: 'Checkers', disabled: true},
+  ]
+  const utils = renderDownshift({items})
+  const {input, arrowDownInput, enterOnInput, changeInputValue} = utils
+
+  const firstItem = utils.queryByTestId('item-0')
+  expect(firstItem.hasAttribute('disabled')).toBe(true)
+
+  changeInputValue('c')
+  // ↓
+  arrowDownInput()
+  // ENTER to select the first one
+  enterOnInput()
+  // item was not selected -> input value should still be 'c'
+  expect(input.value).toBe('c')
+})
+
 function renderDownshift({
-  items = ['Chess', 'Dominion', 'Checkers'],
+  items = [{item: 'Chess'}, {item: 'Dominion'}, {item: 'Checkers'}],
   props,
 } = {}) {
-  const renderSpy = jest.fn(({getItemProps}) => (
+  const renderSpy = jest.fn(({getItemProps, getInputProps}) => (
     <div>
+      <input {...getInputProps({'data-testid': 'input'})} />
       {items.map((item, index) => (
         <div
-          {...getItemProps({item, index})}
+          {...getItemProps({
+            ...item,
+            index,
+          })}
           key={index}
           data-testid={`item-${index}`}
         >
-          <button data-testid={`item-${index}-button`}>{item}</button>
+          <button data-testid={`item-${index}-button`}>{item.item}</button>
         </div>
       ))}
     </div>
   ))
-  const utils = render(
+  const utils = renderIntoDocument(
     <Downshift
       isOpen={true}
       onChange={() => {}}
       render={renderSpy}
       {...props}
     />,
   )
-  return {...utils, renderSpy}
+  const input = utils.queryByTestId('input')
+  return {
+    ...utils,
+    renderSpy,
+    input,
+    arrowDownInput: extraEventProps =>
+      fireEvent.keyDown(input, {key: 'ArrowDown', ...extraEventProps}),
+    arrowUpInput: extraEventProps =>
+      fireEvent.keyDown(input, {key: 'ArrowUp', ...extraEventProps}),
+    enterOnInput: extraEventProps =>
+      fireEvent.keyDown(input, {key: 'Enter', ...extraEventProps}),
+    changeInputValue: (value, extraEventProps) => {
+      input.value = value
+      fireEvent.change(input, {...extraEventProps})
+    },
+  }
 }
 
 function setupWithDownshiftController() {

src/downshift.js

@@ -514,6 +514,12 @@ class Downshift extends Component {
     Enter(event) {
       if (this.getState().isOpen) {
         event.preventDefault()
+        const itemIndex = this.getState().highlightedIndex
+        const item = this.items[itemIndex]
+        const itemNode = this.getItemNodeFromIndex(itemIndex)
+        if (item == null || (itemNode && itemNode.hasAttribute('disabled'))) {
+          return
+        }
         this.selectHighlightedItem({
           type: Downshift.stateChangeTypes.keyDownEnter,
         })