Merge pull request #875 from vrk-kpa/fix/file-input-visibility

[Fix] FileInput input-element visibility
vrk-kpa · Sep 11, 2024 · b984c39 · b984c39
2 parents b52f7a0 + 50fbd71
commit b984c39
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 2 deletions.
diff --git a/src/core/Form/FileInput/FileInput.baseStyles.tsx b/src/core/Form/FileInput/FileInput.baseStyles.tsx
@@ -143,6 +143,10 @@ export const baseStyles = (
           display: flex;
           align-items: center;
 
+          &.fi-file-input_input-wrapper--hidden {
+            visibility: hidden;
+          }
+
           .fi-file-input_drag-text-container {
             ${font(theme)('bodyTextSmall')}
             margin-left: ${theme.spacing.insetXxl};

diff --git a/src/core/Form/FileInput/FileInput.tsx b/src/core/Form/FileInput/FileInput.tsx
@@ -48,6 +48,7 @@ export const fileInputClassNames = {
   singleFileContainer: `${baseClassName}_single-file-container`,
   multiFileContainer: `${baseClassName}_multi-file-container`,
   inputWrapper: `${baseClassName}_input-wrapper`,
+  inputWrapperHidden: `${baseClassName}_input-wrapper--hidden`,
   inputLabel: `${baseClassName}_input-label`,
   inputElement: `${baseClassName}_input-element`,
   error: `${baseClassName}--error`,
@@ -406,7 +407,9 @@ const BaseFileInput = (props: InternalFileInputProps) => {
     // Handle focus
     // If there is only one file, set focus to the input element
     if (!multiFile || initialFilesArray.length === 1) {
-      inputRef.current?.focus();
+      setTimeout(() => {
+        inputRef.current?.focus();
+      }, 100);
     } // In multi file mode, if the removed file was the first item, set focus to the next one
     else if (indexOfRemovedFile === 0) {
       fileItemRefs[indexOfRemovedFile + 1].fileNameRef.current?.focus();
@@ -504,7 +507,12 @@ const BaseFileInput = (props: InternalFileInputProps) => {
             })}
             forwardedRef={dragAreaRef}
           >
-            <HtmlDiv className={fileInputClassNames.inputWrapper}>
+            <HtmlDiv
+              className={classnames(fileInputClassNames.inputWrapper, {
+                [fileInputClassNames.inputWrapperHidden]:
+                  !multiFile && files && files.length > 0,
+              })}
+            >
               <HtmlInput
                 id={id}
                 className={classnames(fileInputClassNames.inputElement, {

diff --git a/src/core/Form/FileInput/__snapshots__/FileInput.test.tsx.snap b/src/core/Form/FileInput/__snapshots__/FileInput.test.tsx.snap
@@ -472,6 +472,10 @@ exports[`snapshots match error status with statustext 1`] = `
   align-items: center;
 }
 
+.c1.fi-file-input .fi-file-input_input-outer-wrapper .fi-file-input_drag-area .fi-file-input_input-wrapper.fi-file-input_input-wrapper--hidden {
+  visibility: hidden;
+}
+
 .c1.fi-file-input .fi-file-input_input-outer-wrapper .fi-file-input_drag-area .fi-file-input_input-wrapper .fi-file-input_drag-text-container {
   -webkit-letter-spacing: 0;
   -moz-letter-spacing: 0;
@@ -1174,6 +1178,10 @@ exports[`snapshots match hidden label 1`] = `
   align-items: center;
 }
 
+.c1.fi-file-input .fi-file-input_input-outer-wrapper .fi-file-input_drag-area .fi-file-input_input-wrapper.fi-file-input_input-wrapper--hidden {
+  visibility: hidden;
+}
+
 .c1.fi-file-input .fi-file-input_input-outer-wrapper .fi-file-input_drag-area .fi-file-input_input-wrapper .fi-file-input_drag-text-container {
   -webkit-letter-spacing: 0;
   -moz-letter-spacing: 0;
@@ -1866,6 +1874,10 @@ exports[`snapshots match hint text 1`] = `
   align-items: center;
 }
 
+.c1.fi-file-input .fi-file-input_input-outer-wrapper .fi-file-input_drag-area .fi-file-input_input-wrapper.fi-file-input_input-wrapper--hidden {
+  visibility: hidden;
+}
+
 .c1.fi-file-input .fi-file-input_input-outer-wrapper .fi-file-input_drag-area .fi-file-input_input-wrapper .fi-file-input_drag-text-container {
   -webkit-letter-spacing: 0;
   -moz-letter-spacing: 0;
@@ -2548,6 +2560,10 @@ exports[`snapshots match minimal implementation 1`] = `
   align-items: center;
 }
 
+.c1.fi-file-input .fi-file-input_input-outer-wrapper .fi-file-input_drag-area .fi-file-input_input-wrapper.fi-file-input_input-wrapper--hidden {
+  visibility: hidden;
+}
+
 .c1.fi-file-input .fi-file-input_input-outer-wrapper .fi-file-input_drag-area .fi-file-input_input-wrapper .fi-file-input_drag-text-container {
   -webkit-letter-spacing: 0;
   -moz-letter-spacing: 0;