Remove setIsDragging(true) from handleDragOver() to improve performance

Author: bedrich-schindler

src/components/FileInputField/FileInputField.jsx

@@ -2,6 +2,8 @@ import PropTypes from 'prop-types';
 import React, {
   useContext,
   useEffect,
+  useImperativeHandle,
+  useRef,
   useState,
 } from 'react';
 import { withGlobalProps } from '../../providers/globalProps';
@@ -34,6 +36,13 @@ export const FileInputField = React.forwardRef((props, ref) => {
     ...restProps
   } = props;
 
+  const internalInputRef = useRef();
+
+  // We need to have a reference to the input element to be able to call its methods,
+  // but at the same time we want to expose this reference to the parent component for
+  // case someone wants to call input methods from outside the component.
+  useImperativeHandle(ref, () => internalInputRef.current);
+
   const formLayoutContext = useContext(FormLayoutContext);
   const inputGroupContext = useContext(InputGroupContext);
   const translations = useContext(TranslationsContext);
@@ -69,8 +78,8 @@ export const FileInputField = React.forwardRef((props, ref) => {
     handleFileChange(event.target.files, event);
   };
 
-  const handleClick = (event) => {
-    event.currentTarget.previousElementSibling.click();
+  const handleClick = () => {
+    internalInputRef?.current.click();
   };
 
   const handleDrop = (event) => {
@@ -81,7 +90,6 @@ export const FileInputField = React.forwardRef((props, ref) => {
 
   const handleDragOver = (event) => {
     event.preventDefault();
-    setIsDragging(true);
   };
 
   const handleDragEnter = () => {
@@ -116,6 +124,7 @@ 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}
@@ -140,15 +149,14 @@ export const FileInputField = React.forwardRef((props, ref) => {
             id={id}
             multiple={multiple}
             onChange={handleInputChange}
-            ref={ref}
+            ref={internalInputRef}
             required={required}
             tabIndex={-1}
             type="file"
           />
           <button
             className={styles.dropZone}
             disabled={resolveContextOrProp(inputGroupContext && inputGroupContext.disabled, disabled)}
-            onClick={handleClick}
             type="button"
           >
             <Text lines={1}>

src/components/FileInputField/FileInputField.module.scss

@@ -1,4 +1,5 @@
 // 1. The drop zone is constructed as a button to support keyboard operation.
+// 2. Prevent pointer events on all children of the root element to not to trigger drag events on children.
 
 @use "../../styles/tools/form-fields/box-field-elements";
 @use "../../styles/tools/form-fields/box-field-layout";
@@ -15,6 +16,10 @@
     // Foundation
     .root {
         @include foundation.root();
+
+        * {
+            pointer-events: none; // 2
+        }
     }
 
     .label {