Set setIsDragging(true) from handleDragOver() conditionally to fix pointer-events

Author: mbohal

src/components/FileInputField/FileInputField.jsx

@@ -89,15 +89,16 @@ export const FileInputField = React.forwardRef((props, ref) => {
   };
 
   const handleDragOver = (event) => {
+    if (!isDragging) {
+      setIsDragging(true);
+    }
     event.preventDefault();
   };
 
-  const handleDragEnter = () => {
-    setIsDragging(true);
-  };
-
   const handleDragLeave = () => {
-    setIsDragging(false);
+    if (isDragging) {
+      setIsDragging(false);
+    }
   };
 
   useEffect(() => {
@@ -124,8 +125,6 @@ export const FileInputField = React.forwardRef((props, ref) => {
         getRootValidationStateClassName(validationState, styles),
       )}
       id={id && `${id}__root`}
-      onClick={handleClick}
-      onDragEnter={!disabled && isDragAndDropSupported ? handleDragEnter : undefined}
       onDragLeave={!disabled && isDragAndDropSupported ? handleDragLeave : undefined}
       onDragOver={!disabled && isDragAndDropSupported ? handleDragOver : undefined}
       onDrop={!disabled && isDragAndDropSupported ? handleDrop : undefined}
@@ -157,6 +156,7 @@ export const FileInputField = React.forwardRef((props, ref) => {
           <button
             className={styles.dropZone}
             disabled={resolveContextOrProp(inputGroupContext && inputGroupContext.disabled, disabled)}
+            onClick={handleClick}
             type="button"
           >
             <Text lines={1}>

src/components/FileInputField/FileInputField.module.scss

@@ -16,10 +16,6 @@
     // Foundation
     .root {
         @include foundation.root();
-
-        * {
-            pointer-events: none; // 2
-        }
     }
 
     .label {