fix: a11y-dropdown-typeahead-downshift (#13744)

* feat: contained list persistent search * docs: update docs for contained list search * fix: fix border * feat: functionality working * fix(tabs): hover style bugs * fix: remove hover from disabled state * feat: clean up code * Update packages/react/src/components/ContainedList/ContainedList.mdx Co-authored-by: Francine Lucca <40550942+francinelucca@users.noreply.github.com> * fix: update docs * fix: fix styling Co-authored-by: Francine Lucca <francinelucca@users.noreply.github.com> * fix: update docs * fix: failing test * fix: fix tests * fix: draft fix for dropdown * fix: run format: --------- Co-authored-by: Alison Joseph <alison.joseph@us.ibm.com> Co-authored-by: Francine Lucca <40550942+francinelucca@users.noreply.github.com> Co-authored-by: Francine Lucca <francinelucca@users.noreply.github.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · May 16, 2023 · 8a70cb7 · 8a70cb7
1 parent ae85de9
commit 8a70cb7
Showing 1 changed file with 40 additions and 2 deletions.
diff --git a/packages/react/src/components/Dropdown/Dropdown.tsx b/packages/react/src/components/Dropdown/Dropdown.tsx
@@ -339,6 +339,11 @@ const Dropdown = React.forwardRef(
 
     const mergedRef = mergeRefs(toggleButtonProps.ref, ref);
 
+    const [currTimer, setCurrTimer] = useState<NodeJS.Timeout>();
+
+    // eslint-disable-next-line prefer-const
+    let [isTyping, setIsTyping] = useState(false);
+
     const readOnlyEventHandlers = readOnly
       ? {
           onClick: (evt: MouseEvent<HTMLButtonElement>) => {
@@ -357,7 +362,40 @@ const Dropdown = React.forwardRef(
             }
           },
         }
-      : {};
+      : {
+          onKeyDown: (evt: React.KeyboardEvent<HTMLButtonElement>) => {
+            console.log('typing should be false', isTyping);
+            if (
+              evt.code !== 'Space' ||
+              !['ArrowDown', 'ArrowUp', ' ', 'Enter'].includes(evt.key)
+            ) {
+              setIsTyping(true);
+            }
+
+            if (
+              (isTyping && evt.code === 'Space') ||
+              !['ArrowDown', 'ArrowUp', ' ', 'Enter'].includes(evt.key)
+            ) {
+              console.log(evt.key);
+              if (evt.code === 'Space') {
+                evt.preventDefault();
+                return;
+              }
+
+              if (currTimer) {
+                clearTimeout(currTimer);
+              }
+              setCurrTimer(
+                setTimeout(() => {
+                  setIsTyping(false);
+                }, 3000)
+              );
+            }
+            toggleButtonProps.onKeyDown(evt);
+          },
+        };
+
+    const menuProps = getMenuProps();
 
     return (
       <div className={wrapperClasses} {...other}>
@@ -418,7 +456,7 @@ const Dropdown = React.forwardRef(
               translateWithId={translateWithId}
             />
           </button>
-          <ListBox.Menu {...getMenuProps()}>
+          <ListBox.Menu {...menuProps}>
             {isOpen &&
               items.map((item, index) => {
                 const isObject = item !== null && typeof item === 'object';