Merge pull request #520 from catho/QTM-495

MarcosViniciusPC · web-flow · commit 73919f70c646 · 2023-08-11T15:10:10.000-03:00
feat(QTM-495):  Navigating between items using letter keys
diff --git a/components/DropdownLight/DropdownLight.jsx b/components/DropdownLight/DropdownLight.jsx
@@ -16,6 +16,7 @@ import {
 import Icon from '../Icon/Icon';
 import useKeyPress from './SubComponents/UseKeyPress';
 import { FieldGroup } from '../shared';
+import useKeyboardSearchItems from './SubComponents/UseKeyboardSearchItems';
 
 const itemPropType = PropTypes.oneOfType([
   PropTypes.string,
@@ -202,33 +203,39 @@ const DropdownLight = ({
     selectedItem || '',
   );
 
-  const [cursor, setCursor] = useState(0);
+  const [cursor, setCursor] = useState(-1);
   const buttonRef = useRef();
   const listOptions = useRef();
 
   const downPress = useKeyPress('ArrowDown');
   const upPress = useKeyPress('ArrowUp');
   const enterPress = useKeyPress('Enter');
+  const focusedItemIndex = useKeyboardSearchItems(items, cursor, isOpen);
   const EscapeKeyPressValue = 'Escape';
 
   const handleToggleDropdown = () => {
-    if (!enterPress) {
-      setIsOpen(!isOpen);
-    }
+    setIsOpen(!isOpen);
+  };
+
+  useEffect(() => {
+    const hasItemSelected = typeof focusedItemIndex === 'number';
+    setCursor(hasItemSelected ? focusedItemIndex : -1);
+  }, [focusedItemIndex]);
 
-    if (isOpen) {
-      listOptions.current.children[0].focus();
+  useEffect(() => {
+    if (isOpen && cursor >= 0) {
+      listOptions.current.children[cursor].focus();
     }
-  };
+  }, [cursor, isOpen]);
 
   const selectItem = (item) => {
     setSelectedOptionItem(item?.label || item);
     onChange(item);
+    setCursor(-1);
     buttonRef.current.focus();
   };
 
   const handleOnClickListItem = (item) => {
-    setIsOpen(false);
     selectItem(item);
   };
 
@@ -241,7 +248,7 @@ const DropdownLight = ({
   const handleEscPress = ({ key }) => {
     if (key === EscapeKeyPressValue) {
       setIsOpen(false);
-      setCursor(0);
+      setCursor(-1);
       buttonRef.current.focus();
     }
   };
@@ -250,15 +257,13 @@ const DropdownLight = ({
     if (isOpen && downPress) {
       const selectedCursor = cursor < items.length - 1 ? cursor + 1 : cursor;
       setCursor(selectedCursor);
-      listOptions.current.children[selectedCursor].focus();
     }
   }, [downPress, items, isOpen]);
 
   useEffect(() => {
     if (isOpen && upPress && cursor > 0) {
       const selectedCursor = cursor - 1;
       setCursor(selectedCursor);
-      listOptions.current.children[selectedCursor].focus();
     }
   }, [upPress, items, isOpen]);
 
@@ -272,22 +277,29 @@ const DropdownLight = ({
   }, []);
 
   useEffect(() => {
-    if (document.activeElement === buttonRef.current && enterPress) {
-      setIsOpen(!isOpen);
+    if (
+      enterPress &&
+      !isOpen &&
+      document.activeElement === buttonRef.current &&
+      selectedOptionItem
+    ) {
+      const selectedItemIndex = items.findIndex(
+        (item) => (item?.label || item) === selectedOptionItem,
+      );
+      setCursor(selectedItemIndex);
     }
 
     if (
-      document.activeElement !== buttonRef.current &&
       enterPress &&
-      listOptions.current
+      isOpen &&
+      listOptions.current?.contains(document.activeElement)
     ) {
-      setIsOpen(false);
-
       const itemsList = [...listOptions.current.children];
+      const selectedItemIndex = itemsList.findIndex(
+        (item) => item === document.activeElement,
+      );
 
-      if (itemsList.some((element) => element === document.activeElement)) {
-        selectItem(items[cursor]);
-      }
+      selectItem(items[selectedItemIndex]);
     }
   }, [enterPress]);
 
diff --git a/components/DropdownLight/DropdownLight.unit.test.jsx b/components/DropdownLight/DropdownLight.unit.test.jsx
@@ -14,6 +14,7 @@ const INPUT_NAME = 'dropdown-name';
 const ARROW_DOWN_KEY_CODE = '{ArrowDown}';
 const ARROW_UP_KEY_CODE = '{ArrowUp}';
 const ENTER_KEY_CODE = '{Enter}';
+const A_KEY_CODE = '{a}';
 const ESCAPE_KEY_CODE = '{Escape}';
 
 describe('<DropdownLight />', () => {
@@ -189,14 +190,48 @@ describe('<DropdownLight />', () => {
     expect(screen.getByRole('list')).toBeInTheDocument();
 
     await userEvent.keyboard(
-      `${ARROW_DOWN_KEY_CODE}${ARROW_DOWN_KEY_CODE}${ARROW_UP_KEY_CODE}${ENTER_KEY_CODE}`,
+      `${ARROW_DOWN_KEY_CODE}${ARROW_DOWN_KEY_CODE}${ARROW_DOWN_KEY_CODE}${ARROW_UP_KEY_CODE}`,
     );
 
-    const bananaItem = itemsStringMock[1];
+    const bananaItemMock = itemsStringMock[1];
+    const bananaItem = screen.getByRole('option', { name: bananaItemMock });
+
+    expect(bananaItem).toHaveFocus();
+
+    await userEvent.keyboard(ENTER_KEY_CODE);
+    const input = screen.getByRole('textbox', { hidden: true });
+
+    expect(input.value).toEqual(bananaItemMock);
+    expect(screen.queryByRole('list')).not.toBeInTheDocument();
+  });
+
+  it('should allow the User to navigate between items using the keys with the initial letter of each item', async () => {
+    render(<DropdownLight items={itemsStringMock} />);
+
+    await userEvent.tab();
+    await userEvent.keyboard(ENTER_KEY_CODE);
+
+    expect(screen.getByRole('list')).toBeInTheDocument();
+
+    await userEvent.keyboard(A_KEY_CODE);
+
+    const avocadoItemMock = itemsStringMock[4];
+    const avocadoItem = screen.getByRole('option', { name: avocadoItemMock });
+
+    expect(avocadoItem).toHaveFocus();
+
+    await userEvent.keyboard(A_KEY_CODE);
+
+    const acaiItemMock = itemsStringMock[5];
+    const acaiItem = screen.getByRole('option', { name: acaiItemMock });
+
+    expect(acaiItem).toHaveFocus();
+
+    await userEvent.keyboard(ENTER_KEY_CODE);
 
     const input = screen.getByRole('textbox', { hidden: true });
 
-    expect(input.value).toEqual(bananaItem);
+    expect(input.value).toEqual(acaiItemMock);
     expect(screen.queryByRole('list')).not.toBeInTheDocument();
   });
 
@@ -212,8 +247,8 @@ describe('<DropdownLight />', () => {
     );
 
     expect(onChangeMock).toHaveBeenCalledWith({
-      label: 'Strawberry',
-      value: 'Strawberry',
+      label: 'Lime',
+      value: 'Lime',
     });
   });
 
diff --git a/components/DropdownLight/SubComponents/UseKeyboardSearchItems.jsx b/components/DropdownLight/SubComponents/UseKeyboardSearchItems.jsx
@@ -0,0 +1,89 @@
+import { useState, useEffect } from 'react';
+
+const useKeyboardSearchItems = (items = [], cursor = -1, isOpen = false) => {
+  const [pressedKey, setPressedKey] = useState(null);
+  const [selectedItemIndex, setSelectedItemIndex] = useState(null);
+
+  const isEqual = (item, itemToCompare) =>
+    (item?.label || item) === (itemToCompare?.label || itemToCompare);
+
+  useEffect(() => {
+    setSelectedItemIndex(cursor >= 0 ? cursor : null);
+  }, [cursor]);
+
+  useEffect(() => {
+    if (pressedKey && isOpen) {
+      let indexItem = selectedItemIndex;
+
+      const itemsWithLetterPressed = items.filter((item) =>
+        (item?.label || item)
+          .toLowerCase()
+          .startsWith(pressedKey.toLowerCase()),
+      );
+
+      if (!itemsWithLetterPressed.length) {
+        return;
+      }
+
+      const selectedItemHasTheLetterPressed = itemsWithLetterPressed.some(
+        (item) => isEqual(item, items[cursor]),
+      );
+      const firstItemInItemsWithLetterPressed = itemsWithLetterPressed[0];
+      const indexOfFirstItemWithLetterPressedOnItems = items.findIndex((item) =>
+        isEqual(item, firstItemInItemsWithLetterPressed),
+      );
+      const selectedItemIsBeforeTheFirstItemWithLetterPressed =
+        cursor < indexOfFirstItemWithLetterPressedOnItems;
+      const noItemSelected = typeof indexItem !== 'number';
+
+      if (
+        noItemSelected ||
+        (!selectedItemHasTheLetterPressed &&
+          selectedItemIsBeforeTheFirstItemWithLetterPressed)
+      ) {
+        setSelectedItemIndex(indexOfFirstItemWithLetterPressedOnItems);
+        return;
+      }
+
+      const selectedItem = items[indexItem];
+      const selectedItemIndexInFilteredItem = itemsWithLetterPressed.findIndex(
+        (item) => isEqual(item, selectedItem),
+      );
+      const nextItemInItemsWithLetterPressed =
+        itemsWithLetterPressed[selectedItemIndexInFilteredItem + 1];
+
+      indexItem = items.findIndex((item) =>
+        isEqual(
+          item,
+          nextItemInItemsWithLetterPressed || firstItemInItemsWithLetterPressed,
+        ),
+      );
+
+      setSelectedItemIndex(indexItem);
+    }
+  }, [pressedKey]);
+
+  const downHandler = ({ key }) => {
+    if (key.length === 1) {
+      setPressedKey(key);
+    }
+  };
+
+  const upHandler = () => {
+    setPressedKey(null);
+  };
+
+  useEffect(() => {
+    window.addEventListener('keydown', downHandler);
+    window.addEventListener('keyup', upHandler);
+
+    return () => {
+      window.removeEventListener('keydown', downHandler);
+      window.removeEventListener('keyup', upHandler);
+    };
+  }, []);
+
+  return selectedItemIndex;
+};
+
+export default useKeyboardSearchItems;
diff --git a/stories/DropdownLight/mock.js b/stories/DropdownLight/mock.js
@@ -1,9 +1,12 @@
 export const itemsObjectMock = [
   { value: 'Lemon', label: 'Lemon' },
+  { value: 'Lime', label: 'Lime' },
   { value: 'Banana', label: 'Banana' },
+  { value: 'Açaí', label: 'Açaí' },
   { value: 'Strawberry', label: 'Strawberry' },
   { value: 'Orange', label: 'Orange' },
   { value: 'Avocado', label: 'Avocado' },
+  { value: 'Acerola', label: 'Acerola' },
 ];
 
 export const itemsStringMock = [
@@ -12,6 +15,7 @@ export const itemsStringMock = [
   'Strawberry',
   'Orange',
   'Avocado',
+  'Açaí',
 ];
 
 export const itemsWithImageMock = [
