fix(Dropdown): collapse dropdown when pressing esc key on the keyboard

webex · Feb 23, 2022 · 9983999 · 9983999
1 parent 5d1ea58
commit 9983999
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 5 deletions.
diff --git a/src/components/WebexActivity/__snapshots__/WebexActivity.stories.storyshot b/src/components/WebexActivity/__snapshots__/WebexActivity.stories.storyshot
@@ -264,6 +264,7 @@ Array [
                 <div
                   className="wxc-dropdown__control"
                   disabled={false}
+                  onKeyDown={[Function]}
                 >
                   <div
                     aria-label="undefined"

diff --git a/src/components/WebexMeetingControl/__snapshots__/WebexMeetingControl.stories.storyshot b/src/components/WebexMeetingControl/__snapshots__/WebexMeetingControl.stories.storyshot
@@ -195,6 +195,7 @@ Array [
         <div
           className="wxc-dropdown__control"
           disabled={true}
+          onKeyDown={[Function]}
         >
           <div
             aria-label="No available cameras. Use arrow keys to navigate between camera options and hit \\"Enter\\" to select."

diff --git a/src/components/WebexSettings/__snapshots__/WebexSettings.stories.storyshot b/src/components/WebexSettings/__snapshots__/WebexSettings.stories.storyshot
@@ -72,6 +72,7 @@ Array [
                 <div
                   className="wxc-dropdown__control"
                   disabled={false}
+                  onKeyDown={[Function]}
                 >
                   <div
                     aria-label="Browser Default. Use arrow keys to navigate between speaker options and hit \\"Enter\\" to select."
@@ -122,6 +123,7 @@ Array [
                 <div
                   className="wxc-dropdown__control"
                   disabled={true}
+                  onKeyDown={[Function]}
                 >
                   <div
                     aria-label="No available microphones. Use arrow keys to navigate between microphone options and hit \\"Enter\\" to select."

diff --git a/...s/adaptive-cards/AdaptiveCard/AdaptiveCard.stories/__snapshots__/Inputs.stories.storyshot b/...s/adaptive-cards/AdaptiveCard/AdaptiveCard.stories/__snapshots__/Inputs.stories.storyshot
@@ -35,6 +35,7 @@ Array [
             <div
               className="wxc-dropdown__control"
               disabled={false}
+              onKeyDown={[Function]}
             >
               <div
                 aria-label="undefined"
@@ -101,6 +102,7 @@ Array [
             <div
               className="wxc-dropdown__control"
               disabled={false}
+              onKeyDown={[Function]}
             >
               <div
                 aria-label="Option 1. undefined"

diff --git a/src/components/generic/Modal/Modal.jsx b/src/components/generic/Modal/Modal.jsx
@@ -34,15 +34,15 @@ export default function Modal({
     'centered-modal': width > TABLET,
   });
 
-  const handleKeyUp = (event) => {
+  const handleKeyDown = (event) => {
     if (event.key === 'Escape' || event.key === 'Esc') {
       onClose();
     }
   };
 
   return (
     // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-    <div ref={ref} className={cssClasses} onKeyUp={handleKeyUp} role="dialog" aria-label={ariaLabel || title}>
+    <div ref={ref} className={cssClasses} onKeyDown={handleKeyDown} role="dialog" aria-label={ariaLabel || title}>
       <div className={`${sc('content')} ${otherClassName}`}>
         <div className={sc('header')}>
           {onBack && (

diff --git a/src/components/inputs/Dropdown/Dropdown.jsx b/src/components/inputs/Dropdown/Dropdown.jsx
@@ -61,7 +61,15 @@ export default function Dropdown({
   };
 
   const handleKeyDown = (event) => {
-    if ((event.key === 'Enter' || event.key === ' ') && event.target === event.currentTarget) {
+    if (event.key === 'Escape' || event.key === 'Esc') {
+      event.stopPropagation();
+      collapse();
+    }
+  };
+
+  const handleSelectedOptionKeyDown = (event) => {
+    if ((event.key === 'Enter' || event.key === ' ')) {
+      event.preventDefault(); // prevent page scrolling
       expand(true);
     } else if (event.key === 'Tab') {
       collapse();
@@ -90,15 +98,17 @@ export default function Dropdown({
       label={controlLabel}
       required={required}
     >
-      <div className={sc('control')} disabled={disabled}>
+      {/* This element handles delegated keyboard events from its descendants (Esc key) */}
+      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
+      <div className={sc('control')} disabled={disabled} onKeyDown={handleKeyDown}>
         <div
           className={`${sc('selected-option')} ${expanded ? sc('expanded') : ''}`}
           onClick={() => toggleExpanded(false)}
           role="button"
           tabIndex={disabled ? -1 : tabIndex}
           title={tooltip}
+          onKeyDown={handleSelectedOptionKeyDown}
           aria-label={`${label ? `${label}. ` : ''}${ariaLabel}`}
-          onKeyDown={handleKeyDown}
           ref={ref}
         >
           <span className={sc('label')}>{options === null ? 'Loading...' : (label || value || placeholder)}</span>