fix(FileUploader): hide native input in Safari (#3309)

skbkontur · Nov 2, 2023 · 3454e50 · 3454e50
1 parent d881c90
commit 3454e50
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/packages/react-ui/components/FileUploader/FileUploader.styles.ts b/packages/react-ui/components/FileUploader/FileUploader.styles.ts
@@ -136,10 +136,18 @@ const styles = {
     `;
   },
 
-  fileInput() {
+  visuallyHidden() {
     return css`
-      width: 0;
-      height: 0;
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      margin: -1px;
+      border: 0;
+      padding: 0;
+      white-space: nowrap;
+      clip-path: inset(100%);
+      clip: rect(0 0 0 0);
+      overflow: hidden;
     `;
   },
 

diff --git a/packages/react-ui/components/FileUploader/FileUploader.tsx b/packages/react-ui/components/FileUploader/FileUploader.tsx
@@ -350,7 +350,7 @@ const _FileUploader = React.forwardRef<FileUploaderRef, _FileUploaderProps>((pro
               type="file"
               disabled={disabled}
               multiple={multiple}
-              className={jsStyles.fileInput()}
+              className={jsStyles.visuallyHidden()}
               onClick={stopPropagation}
               onChange={handleInputChange}
               onFocus={handleFocus}