Merge pull request #1262 from dxc-technology/gomezivann-keycode-fix

[Patch] Replace keycode for key in the affected components

Author: raquelarrojo

lib/src/date-input/DateInput.tsx

@@ -46,8 +46,9 @@ const DxcDateInput = React.forwardRef<RefType, DateInputPropsType>(
     const refDate = ref || useRef(null);
 
     const handleCalendarOnKeyDown = (event) => {
-      switch (event.keyCode) {
-        case 27: // Esc
+      switch (event.key) {
+        case "Esc":
+        case "Escape":
           event.preventDefault();
           setIsOpen(false);
           break;

lib/src/radio-group/RadioGroup.tsx

@@ -96,19 +96,23 @@ const DxcRadioGroup = React.forwardRef<RefType, RadioGroupPropsType>(
       });
     };
     const handleOnKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
-      switch (event.keyCode) {
-        case 37: // arrow left
-        case 38: // arrow up
+      switch (event.key) {
+        case "Left":
+        case "ArrowLeft":
+        case "Up":
+        case "ArrowUp":
           event.preventDefault();
           setPreviousRadioChecked();
           break;
-        case 39: // arrow right
-        case 40: // arrow down
+        case "Right":
+        case "ArrowRight":
+        case "Down":
+        case "ArrowDown":
           event.preventDefault();
           setNextRadioChecked();
           break;
-        case 13: // enter
-        case 32: // space
+        case "Enter":
+        case "Space":
           event.preventDefault();
           handleOnChange(innerOptions[currentFocusIndex].value);
           break;

lib/src/tabs-nav/NavTabs.tsx

@@ -61,12 +61,14 @@ const DxcNavTabs = ({ iconPosition = "top", tabIndex = 0, children }: NavTabsPro
     const activeTab = React.Children.toArray(children).findIndex((child: ReactElement) =>
       getPropInChild(child, "active")
     );
-    switch (event.keyCode) {
-      case 37: // arrow left
+    switch (event.key) {
+      case "Left":
+      case "ArrowLeft":
         event.preventDefault();
         setInnerFocus(getPreviousTabIndex(children, innerFocus === null ? activeTab : innerFocus));
         break;
-      case 39: // arrow right
+      case "Right":
+      case "ArrowRight":
         event.preventDefault();
         setInnerFocus(getNextTabIndex(children, innerFocus === null ? activeTab : innerFocus));
         break;

lib/src/tabs-nav/Tab.tsx

@@ -6,15 +6,7 @@ import { TabProps } from "./types";
 
 const DxcTab = forwardRef(
   (
-    {
-      href,
-      active = false,
-      icon,
-      disabled = false,
-      notificationNumber = false,
-      children,
-      ...otherProps
-    }: TabProps,
+    { href, active = false, icon, disabled = false, notificationNumber = false, children, ...otherProps }: TabProps,
     ref: Ref<HTMLAnchorElement>
   ): JSX.Element => {
     const tabRef: React.MutableRefObject<HTMLAnchorElement> = createRef();
@@ -26,9 +18,9 @@ const DxcTab = forwardRef(
     }, [focusedLabel]);
 
     const handleOnKeyDown = (event: React.KeyboardEvent<HTMLAnchorElement>) => {
-      switch (event.keyCode) {
-        case 13: // enter
-        case 32: // space
+      switch (event.key) {
+        case "Enter":
+        case "Space":
           tabRef?.current?.click();
           event.preventDefault();
           break;

lib/src/text-input/TextInput.tsx

@@ -52,10 +52,6 @@ const makeCancelable = (promise) => {
   };
 };
 
-const getNotOptionalErrorMessage = () => `This field is required. Please, enter a value.`;
-
-const getPatternErrorMessage = () => `Please match the format requested.`;
-
 const patternMatch = (pattern, value) => new RegExp(pattern).test(value);
 
 const getLastOptionIndex = (filteredSuggestions) => {
@@ -200,13 +196,13 @@ const DxcTextInput = React.forwardRef<RefType, TextInputPropsType>(
       else onBlur?.({ value: event.target.value });
     };
     const handleIOnKeyDown = (event) => {
-      switch (event.keyCode) {
-        case 40: // Arrow Down
+      switch (event.key) {
+        case "Down":
+        case "ArrowDown":
+          event.preventDefault();
           if (numberInputContext?.typeNumber === "number") {
             decrementNumber();
-            event.preventDefault();
           } else {
-            event.preventDefault();
             openSuggestions();
             if (!isAutosuggestError && !isSearching && filteredSuggestions.length > 0) {
               changeVisualFocusedSuggIndex((visualFocusedSuggIndex) => {
@@ -216,12 +212,12 @@ const DxcTextInput = React.forwardRef<RefType, TextInputPropsType>(
             }
           }
           break;
-        case 38: // Arrow Up
+        case "Up":
+        case "ArrowUp":
+          event.preventDefault();
           if (numberInputContext?.typeNumber === "number") {
             incrementNumber();
-            event.preventDefault();
           } else {
-            event.preventDefault();
             openSuggestions();
             if (!isAutosuggestError && !isSearching && filteredSuggestions.length > 0) {
               changeVisualFocusedSuggIndex((visualFocusedSuggIndex) => {
@@ -232,14 +228,15 @@ const DxcTextInput = React.forwardRef<RefType, TextInputPropsType>(
             }
           }
           break;
-        case 27: // Esc
+        case "Esc":
+        case "Escape":
           event.preventDefault();
           if (hasSuggestions()) {
             changeValue("");
             isOpen && closeSuggestions();
           }
           break;
-        case 13: // Enter
+        case "Enter":
           if (hasSuggestions() && !isSearching) {
             const validFocusedSuggestion =
               filteredSuggestions.length > 0 &&