fix(highlightedIndex): do not highlight disabled items by keyboard (#799

) * implement for vanilla downshift * finish work on highlighting items * changes for character key highlight * further testing and a fix for character keys * update snapshot * code improvement * update snapshot
downshift-js · Dec 31, 2019 · 84b6ff6 · 84b6ff6
1 parent e2404b7
commit 84b6ff6
Show file tree

Hide file tree

Showing 16 changed files with 807 additions and 149 deletions.
diff --git a/.size-snapshot.json b/.size-snapshot.json
@@ -1,59 +1,59 @@
 {
   "dist/downshift.cjs.js": {
-    "bundled": 107604,
-    "minified": 50106,
-    "gzipped": 11240
+    "bundled": 112826,
+    "minified": 51874,
+    "gzipped": 11485
   },
   "preact/dist/downshift.cjs.js": {
-    "bundled": 106322,
-    "minified": 49068,
-    "gzipped": 11125
+    "bundled": 111544,
+    "minified": 50836,
+    "gzipped": 11384
   },
   "preact/dist/downshift.umd.min.js": {
-    "bundled": 118383,
-    "minified": 38903,
-    "gzipped": 11087
+    "bundled": 123793,
+    "minified": 40421,
+    "gzipped": 11305
   },
   "preact/dist/downshift.umd.js": {
-    "bundled": 134506,
-    "minified": 46407,
-    "gzipped": 12880
+    "bundled": 139916,
+    "minified": 47922,
+    "gzipped": 13092
   },
   "dist/downshift.umd.min.js": {
-    "bundled": 122618,
-    "minified": 40223,
-    "gzipped": 11625
+    "bundled": 128028,
+    "minified": 41737,
+    "gzipped": 11842
   },
   "dist/downshift.umd.js": {
-    "bundled": 164131,
-    "minified": 55319,
-    "gzipped": 15457
+    "bundled": 169541,
+    "minified": 56834,
+    "gzipped": 15689
   },
   "dist/downshift.esm.js": {
-    "bundled": 107135,
-    "minified": 49711,
-    "gzipped": 11172,
+    "bundled": 112665,
+    "minified": 51585,
+    "gzipped": 11426,
     "treeshaked": {
       "rollup": {
-        "code": 998,
-        "import_statements": 303
+        "code": 1751,
+        "import_statements": 317
       },
       "webpack": {
-        "code": 3280
+        "code": 3838
       }
     }
   },
   "preact/dist/downshift.esm.js": {
-    "bundled": 105823,
-    "minified": 48643,
-    "gzipped": 11057,
+    "bundled": 111045,
+    "minified": 50411,
+    "gzipped": 11314,
     "treeshaked": {
       "rollup": {
-        "code": 999,
-        "import_statements": 304
+        "code": 1752,
+        "import_statements": 318
       },
       "webpack": {
-        "code": 3279
+        "code": 3837
       }
     }
   }

diff --git a/src/__tests__/downshift.get-item-props.js b/src/__tests__/downshift.get-item-props.js
@@ -178,6 +178,150 @@ test(`disabled item can't be selected by pressing enter`, () => {
   expect(input.value).toBe('c')
 })
 
+test(`disabled item can't be highlighted when navigating via keyDown`, () => {
+  const items = [
+    {item: 'Chess'},
+    {item: 'Dominion', disabled: true},
+    {item: 'Checkers'},
+    {item: 'Backgammon'},
+  ]
+  const utils = renderDownshift({items, props: {initialHighlightedIndex: 0}})
+  const {input, arrowDownInput, enterOnInput} = utils
+
+  // ↓
+  arrowDownInput()
+  // ↓ (should skip the first and second option)
+  // ENTER to select
+  enterOnInput()
+
+  expect(input.value).toBe('Checkers')
+})
+
+test(`disabled item can't be highlighted and may wrap when navigating via keyDown`, () => {
+  const items = [
+    {item: 'Chess'},
+    {item: 'Dominion'},
+    {item: 'Checkers', disabled: true},
+    {item: 'Backgammon', disabled: true},
+  ]
+  const utils = renderDownshift({items, props: {initialHighlightedIndex: 1}})
+  const {input, arrowDownInput, enterOnInput} = utils
+
+  // ↓
+  arrowDownInput()
+  // ↓ (should skip the first and second option)
+  // ENTER to select
+  enterOnInput()
+
+  expect(input.value).toBe('Chess')
+})
+
+test(`disabled item can't be highlighted when navigating via keyUp`, () => {
+  const items = [
+    {item: 'Chess'},
+    {item: 'Dominion', disabled: true},
+    {item: 'Checkers'},
+    {item: 'Backgammon'},
+  ]
+  const utils = renderDownshift({items, props: {initialHighlightedIndex: 2}})
+  const {input, arrowUpInput, enterOnInput} = utils
+
+  // ↑
+  arrowUpInput()
+  // ENTER to select
+  enterOnInput()
+
+  expect(input.value).toBe('Chess')
+})
+
+test(`disabled item can't be highlighted and it may wrap when navigating via keyUp`, () => {
+  const items = [
+    {item: 'Chess', disabled: true},
+    {item: 'Dominion', disabled: true},
+    {item: 'Checkers'},
+    {item: 'Backgammon'},
+  ]
+  const utils = renderDownshift({items, props: {initialHighlightedIndex: 2}})
+  const {input, arrowUpInput, enterOnInput} = utils
+
+  // ↑
+  arrowUpInput()
+  // ENTER to select
+  enterOnInput()
+
+  expect(input.value).toBe('Backgammon')
+})
+
+test(`disabled item can't be highlighted when navigating via end`, () => {
+  const items = [
+    {item: 'Backgammon'},
+    {item: 'Chess'},
+    {item: 'Dominion', disabled: true},
+    {item: 'Checkers', disabled: true},
+  ]
+  const utils = renderDownshift({items})
+  const {input, endOnInput, enterOnInput} = utils
+
+  // end
+  endOnInput()
+  // ENTER to select
+  enterOnInput()
+
+  expect(input.value).toBe('Chess')
+})
+
+test(`disabled item can't be highlighted when navigating via home`, () => {
+  const items = [
+    {item: 'Chess', disabled: true},
+    {item: 'Dominion', disabled: true},
+    {item: 'Checkers'},
+    {item: 'Backgammon'},
+  ]
+  const utils = renderDownshift({items})
+  const {input, homeOnInput, enterOnInput} = utils
+
+  // home
+  homeOnInput()
+  // ENTER to select
+  enterOnInput()
+
+  expect(input.value).toBe('Checkers')
+})
+
+test(`highlight wrapping works with disabled items upwards`, () => {
+  const items = [
+    {item: 'Chess', disabled: true},
+    {item: 'Dominion'},
+    {item: 'Checkers'},
+  ]
+  const utils = renderDownshift({items, props: {initialHighlightedIndex: 1}})
+  const {input, arrowUpInput, enterOnInput} = utils
+
+  // ↑
+  arrowUpInput()
+  // ENTER to select
+  enterOnInput()
+
+  expect(input.value).toBe('Checkers')
+})
+
+test(`highlight wrapping works with disabled items downwards`, () => {
+  const items = [
+    {item: 'Chess'},
+    {item: 'Dominion'},
+    {item: 'Checkers', disabled: true},
+  ]
+  const utils = renderDownshift({items, props: {initialHighlightedIndex: 1}})
+  const {input, arrowDownInput, enterOnInput} = utils
+
+  // ↓
+  arrowDownInput()
+  // ENTER to select
+  enterOnInput()
+
+  expect(input.value).toBe('Chess')
+})
+
 function renderDownshift({
   items = [{item: 'Chess'}, {item: 'Dominion'}, {item: 'Checkers'}],
   props,
@@ -212,6 +356,10 @@ function renderDownshift({
     ...utils,
     childrenSpy,
     input,
+    homeOnInput: extraEventProps =>
+      fireEvent.keyDown(input, {key: 'Home', ...extraEventProps}),
+    endOnInput: extraEventProps =>
+      fireEvent.keyDown(input, {key: 'End', ...extraEventProps}),
     arrowDownInput: extraEventProps =>
       fireEvent.keyDown(input, {key: 'ArrowDown', ...extraEventProps}),
     arrowUpInput: extraEventProps =>