fix(InputField,Textarea): stop bubbling for processed arrow key events

webex · Mar 28, 2022 · 0c46a27 · 0c46a27
1 parent bf5d4b8
commit 0c46a27
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 1 deletion.
diff --git a/src/components/WebexActivity/__snapshots__/WebexActivity.stories.storyshot b/src/components/WebexActivity/__snapshots__/WebexActivity.stories.storyshot
@@ -173,6 +173,7 @@ Array [
                             disabled={false}
                             id="wxc-0-control"
                             onChange={[Function]}
+                            onKeyDown={[Function]}
                             required={true}
                             tabIndex={0}
                             type="text"
@@ -244,6 +245,7 @@ Array [
                             disabled={false}
                             id="wxc-0-control"
                             onChange={[Function]}
+                            onKeyDown={[Function]}
                             required={true}
                             tabIndex={0}
                             type="text"
@@ -300,6 +302,7 @@ Array [
                         disabled={false}
                         id="wxc-0-control"
                         onChange={[Function]}
+                        onKeyDown={[Function]}
                         required={true}
                         tabIndex={0}
                         type="email"
@@ -422,6 +425,7 @@ Array [
                     max={10}
                     min={1}
                     onChange={[Function]}
+                    onKeyDown={[Function]}
                     placeholder="Please select the number of guests"
                     required={true}
                     tabIndex={0}
@@ -595,6 +599,7 @@ Array [
                         disabled={false}
                         id="wxc-0-control"
                         onChange={[Function]}
+                        onKeyDown={[Function]}
                         required={true}
                         tabIndex={0}
                         type="date"
@@ -662,6 +667,7 @@ Array [
                         disabled={false}
                         id="wxc-0-control"
                         onChange={[Function]}
+                        onKeyDown={[Function]}
                         required={true}
                         tabIndex={0}
                         type="time"
@@ -714,6 +720,7 @@ Array [
                     disabled={false}
                     id="wxc-0-control"
                     onChange={[Function]}
+                    onKeyDown={[Function]}
                     required={true}
                     tabIndex={0}
                     type="date"

diff --git a/...eetingGuestAuthentication/__snapshots__/WebexMeetingGuestAuthentication.stories.storyshot b/...eetingGuestAuthentication/__snapshots__/WebexMeetingGuestAuthentication.stories.storyshot
@@ -58,6 +58,7 @@ Array [
               id="wxc-0-control"
               name="name"
               onChange={[Function]}
+              onKeyDown={[Function]}
               required={false}
               tabIndex={101}
               type="text"
@@ -96,6 +97,7 @@ Array [
               id="wxc-0-control"
               name="password"
               onChange={[Function]}
+              onKeyDown={[Function]}
               required={false}
               tabIndex={102}
               type="password"

diff --git a/...xMeetingHostAuthentication/__snapshots__/WebexMeetingHostAuthentication.stories.storyshot b/...xMeetingHostAuthentication/__snapshots__/WebexMeetingHostAuthentication.stories.storyshot
@@ -60,6 +60,7 @@ Array [
               id="wxc-0-control"
               name="password"
               onChange={[Function]}
+              onKeyDown={[Function]}
               required={false}
               tabIndex={101}
               type="password"

diff --git a/.../adaptive-cards/AdaptiveCard/AdaptiveCard.stories/__snapshots__/Actions.stories.storyshot b/.../adaptive-cards/AdaptiveCard/AdaptiveCard.stories/__snapshots__/Actions.stories.storyshot
@@ -79,6 +79,7 @@ Array [
               disabled={false}
               id="wxc-0-control"
               onChange={[Function]}
+              onKeyDown={[Function]}
               required={false}
               tabIndex={0}
               type="text"
@@ -128,6 +129,7 @@ Array [
               disabled={false}
               id="wxc-0-control"
               onChange={[Function]}
+              onKeyDown={[Function]}
               required={false}
               tabIndex={0}
               type="text"
@@ -521,6 +523,7 @@ Array [
               disabled={false}
               id="wxc-0-control"
               onChange={[Function]}
+              onKeyDown={[Function]}
               placeholder="What is your first name?"
               required={true}
               tabIndex={0}
@@ -560,6 +563,7 @@ Array [
               disabled={false}
               id="wxc-0-control"
               onChange={[Function]}
+              onKeyDown={[Function]}
               placeholder="What is your last name?"
               required={false}
               tabIndex={0}
@@ -598,6 +602,7 @@ Array [
             max={10}
             min={1}
             onChange={[Function]}
+            onKeyDown={[Function]}
             placeholder="Enter a number between 1 and 10"
             required={false}
             tabIndex={0}

diff --git a/...s/adaptive-cards/AdaptiveCard/AdaptiveCard.stories/__snapshots__/Inputs.stories.storyshot b/...s/adaptive-cards/AdaptiveCard/AdaptiveCard.stories/__snapshots__/Inputs.stories.storyshot
@@ -587,6 +587,7 @@ Array [
             disabled={false}
             id="wxc-0-control"
             onChange={[Function]}
+            onKeyDown={[Function]}
             required={false}
             tabIndex={0}
             type="date"
@@ -695,6 +696,7 @@ Array [
             max={10}
             min={1}
             onChange={[Function]}
+            onKeyDown={[Function]}
             placeholder="Enter a number"
             required={false}
             tabIndex={0}
@@ -914,6 +916,7 @@ Array [
               disabled={false}
               id="wxc-0-control"
               onChange={[Function]}
+              onKeyDown={[Function]}
               required={true}
               tabIndex={0}
               type="text"
@@ -985,6 +988,7 @@ Array [
               disabled={false}
               id="wxc-0-control"
               onChange={[Function]}
+              onKeyDown={[Function]}
               required={false}
               tabIndex={0}
               type="email"
@@ -1034,6 +1038,7 @@ Array [
               disabled={false}
               id="wxc-0-control"
               onChange={[Function]}
+              onKeyDown={[Function]}
               required={false}
               tabIndex={0}
               type="tel"
@@ -1083,6 +1088,7 @@ Array [
               disabled={false}
               id="wxc-0-control"
               onChange={[Function]}
+              onKeyDown={[Function]}
               required={false}
               tabIndex={0}
               type="url"
@@ -1132,6 +1138,7 @@ Array [
               disabled={false}
               id="wxc-0-control"
               onChange={[Function]}
+              onKeyDown={[Function]}
               required={false}
               tabIndex={0}
               type="password"
@@ -1192,6 +1199,7 @@ Array [
             id="wxc-0-control"
             maxLength={500}
             onChange={[Function]}
+            onKeyDown={[Function]}
             placeholder="enter comment"
             rows={5}
             value=""
@@ -1250,6 +1258,7 @@ Array [
             id="wxc-0-control"
             maxLength={500}
             onChange={[Function]}
+            onKeyDown={[Function]}
             placeholder="enter comment"
             rows={5}
             value="This value was pre-filled"
@@ -1355,6 +1364,7 @@ Array [
             disabled={false}
             id="wxc-0-control"
             onChange={[Function]}
+            onKeyDown={[Function]}
             required={false}
             tabIndex={0}
             type="time"
@@ -1405,6 +1415,7 @@ Array [
             disabled={false}
             id="wxc-0-control"
             onChange={[Function]}
+            onKeyDown={[Function]}
             required={true}
             tabIndex={0}
             type="time"
@@ -1450,6 +1461,7 @@ Array [
             disabled={false}
             id="wxc-0-control"
             onChange={[Function]}
+            onKeyDown={[Function]}
             required={false}
             tabIndex={0}
             type="time"

diff --git a/src/components/generic/InputField/InputField.jsx b/src/components/generic/InputField/InputField.jsx
@@ -66,6 +66,14 @@ export default function InputField({
   const handleChange = (event) => onChange(event.target.value);
   const id = domId || uniqueId();
 
+  const onKeyDown = (event) => {
+    const keys = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
+
+    if (keys.includes(event.key)) {
+      event.stopPropagation(); // prevent other navigation
+    }
+  };
+
   useAutoFocus(inputRef, autoFocus);
 
   return (
@@ -94,6 +102,7 @@ export default function InputField({
           min={min}
           name={name}
           onChange={handleChange}
+          onKeyDown={onKeyDown}
           pattern={pattern}
           placeholder={placeholder}
           ref={inputRef}

diff --git a/src/components/inputs/NumberInput/NumberInput.jsx b/src/components/inputs/NumberInput/NumberInput.jsx
@@ -119,7 +119,7 @@ NumberInput.propTypes = {
   required: PropTypes.bool,
   style: PropTypes.shape(),
   tabIndex: PropTypes.number,
-  value: PropTypes.oneOf([
+  value: PropTypes.oneOfType([
     PropTypes.number,
     PropTypes.string,
   ]),

diff --git a/src/components/inputs/Textbox/Textbox.jsx b/src/components/inputs/Textbox/Textbox.jsx
@@ -41,6 +41,14 @@ export default function Textbox({
   const [cssClasses, sc] = webexComponentClasses('textbox', className);
   const id = domId || uniqueId();
 
+  const onKeyDown = (event) => {
+    const keys = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
+
+    if (keys.includes(event.key)) {
+      event.stopPropagation(); // prevent other navigation
+    }
+  };
+
   return (
     <Label
       className={cssClasses}
@@ -59,6 +67,7 @@ export default function Textbox({
         maxLength={maxLength}
         name={name}
         onChange={(event) => onChange(event.target.value)}
+        onKeyDown={onKeyDown}
         placeholder={placeholder}
         rows={5}
         value={value}