Merge pull request #694 from devtron-labs/fix/shortcut

fix: key missing in case of custom keydown events

Author: Elessar1802

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.10.0-patch-8",
+    "version": "1.10.0-patch-9",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -121,7 +121,9 @@ const UseRegisterShortcutProvider = ({
         }
 
         if (
-            ignoredTags.map((tag) => tag.toUpperCase()).indexOf((event.target as HTMLElement).tagName.toUpperCase()) >
+            // NOTE: in case of custom events generated by password managers autofill, the event.key is not set
+            !event.key ||
+            ignoredTags.map((tag) => tag.toUpperCase()).indexOf((event.target as HTMLElement).tagName?.toUpperCase()) >
                 -1 ||
             (event.target as HTMLElement)?.role === 'textbox' ||
             disableShortcutsRef.current

src/Common/Hooks/UseRegisterShortcut/UseRegisterShortcutProvider.tsx

@@ -14,14 +14,14 @@
  * limitations under the License.
  */
 
-import { ChangeEvent } from 'react'
+import { ChangeEvent, useMemo } from 'react'
 
-import { ReactComponent as ICUploadArrowAnimated } from '@Icons/ic-upload-arrow-animated.svg'
-import { ReactComponent as ICFileText } from '@Icons/ic-file-text.svg'
 import { ReactComponent as ICCross } from '@Icons/ic-cross.svg'
+import { ReactComponent as ICFileText } from '@Icons/ic-file-text.svg'
+import { ReactComponent as ICUploadArrowAnimated } from '@Icons/ic-upload-arrow-animated.svg'
 import { Tooltip } from '@Common/Tooltip'
-
 import { ComponentSizeType } from '@Shared/constants'
+import { getUniqueId } from '@Shared/Helpers'
 
 import { Button, ButtonStyleType, ButtonVariantType } from '../Button'
 import { FileUploadProps } from './types'
@@ -36,6 +36,8 @@ export const FileUpload = ({
     fileTypes = [],
     onUpload,
 }: FileUploadProps) => {
+    const id = useMemo(() => `fileInput-${getUniqueId()}`, [])
+
     // METHODS
     const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
         if (event.target.files) {
@@ -88,11 +90,11 @@ export const FileUpload = ({
             ) : (
                 <div className="dc__position-rel flex">
                     {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
-                    <label htmlFor="fileInput" className="m-0 fw-4 cb-5 fs-13 lh-20 flex-grow-1 cursor">
+                    <label htmlFor={id} className="m-0 fw-4 cb-5 fs-13 lh-20 flex-grow-1 cursor">
                         {label || 'Upload file…'}
                     </label>
                     <input
-                        id="fileInput"
+                        id={id}
                         type="file"
                         className="dc__visibility-hidden dc__position-abs dc__top-0 dc__right-0 dc__bottom-0 dc__left-0"
                         onChange={handleFileChange}