Brand buttons show focus state when tabbing, file uploader opens when…

… pressing enter
fleetdm · Oct 14, 2024 · ecc8075 · ecc8075
1 parent 3d25d46
commit ecc8075
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 9 deletions.
diff --git a/frontend/components/FileUploader/FileUploader.tsx b/frontend/components/FileUploader/FileUploader.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useRef } from "react";
 import classnames from "classnames";
 
 import Button from "components/buttons/Button";
@@ -74,18 +74,32 @@ export const FileUploader = ({
   fileDetails,
 }: IFileUploaderProps) => {
   const [isFileSelected, setIsFileSelected] = useState(!!fileDetails);
+  const fileInputRef = useRef<HTMLInputElement>(null);
 
   const classes = classnames(baseClass, className, {
     [`${baseClass}__file-preview`]: isFileSelected,
   });
   const buttonVariant = buttonType === "button" ? "brand" : "text-icon";
 
+  const triggerFileInput = () => {
+    fileInputRef.current?.click();
+  };
+
   const onFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
     const files = e.target.files;
     onFileUpload(files);
     setIsFileSelected(true);
 
-    e.target.value = "";
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      triggerFileInput();
+    }
   };
 
   const renderGraphics = () => {
@@ -113,13 +127,17 @@ export const FileUploader = ({
           variant={buttonVariant}
           isLoading={isLoading}
           disabled={disabled}
+          onKeyDown={handleKeyDown}
+          tabIndex={0}
+          onClick={triggerFileInput}
         >
           <label htmlFor="upload-file">
             {buttonType === "link" && <Icon name="upload" />}
             <span>{buttonMessage}</span>
           </label>
         </Button>
         <input
+          ref={fileInputRef}
           accept={accept}
           id="upload-file"
           type="file"

diff --git a/frontend/components/buttons/Button/Button.tsx b/frontend/components/buttons/Button/Button.tsx
@@ -39,6 +39,7 @@ export interface IButtonProps {
   onClick?:
     | ((value?: any) => void)
     | ((evt: React.MouseEvent<HTMLButtonElement>) => void);
+  onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;
   isLoading?: boolean;
 }
 
@@ -101,6 +102,7 @@ class Button extends React.Component<IButtonProps, IButtonState> {
       title,
       variant,
       isLoading,
+      onKeyDown,
     } = this.props;
     const fullClassName = classnames(
       baseClass,
@@ -122,6 +124,7 @@ class Button extends React.Component<IButtonProps, IButtonState> {
         className={fullClassName}
         disabled={disabled}
         onClick={handleClick}
+        onKeyDown={onKeyDown}
         tabIndex={tabIndex}
         type={type}
         title={title}

diff --git a/frontend/pages/hosts/components/DeleteHostModal/DeleteHostModal.tsx b/frontend/pages/hosts/components/DeleteHostModal/DeleteHostModal.tsx
@@ -4,7 +4,6 @@ import strUtils from "utilities/strings";
 
 import Modal from "components/Modal";
 import Button from "components/buttons/Button";
-import CustomLink from "components/CustomLink";
 
 const baseClass = "delete-host-modal";
 
@@ -59,12 +58,7 @@ const DeleteHostModal = ({
   };
 
   return (
-    <Modal
-      title="Delete host"
-      onExit={onCancel}
-      onEnter={onSubmit}
-      className={baseClass}
-    >
+    <Modal title="Delete host" onExit={onCancel} className={baseClass}>
       <>
         <p>
           This will remove the record of <b>{hostText()}</b>.{largeVolumeText()}