From d558ab34379f30ef6b10bc9b5e5084fd19f8198b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ilkka=20P=C3=A4ttikangas?= Date: Fri, 9 Aug 2024 15:43:49 +0300 Subject: [PATCH 1/2] Fix FileInput onChange --- src/core/Form/DateInput/DateInput.md | 4 +- .../Form/FileInput/FileInput.baseStyles.tsx | 1 + src/core/Form/FileInput/FileInput.md | 4 +- src/core/Form/FileInput/FileInput.tsx | 25 +++++---- .../__snapshots__/FileInput.test.tsx.snap | 52 +++++++++++++++++++ 5 files changed, 73 insertions(+), 13 deletions(-) diff --git a/src/core/Form/DateInput/DateInput.md b/src/core/Form/DateInput/DateInput.md index 24446ab15..d7ec90dce 100644 --- a/src/core/Form/DateInput/DateInput.md +++ b/src/core/Form/DateInput/DateInput.md @@ -378,8 +378,8 @@ const labelText = 'Beginning date'; language="en" tooltipComponent={ What happens on the beginning date? diff --git a/src/core/Form/FileInput/FileInput.baseStyles.tsx b/src/core/Form/FileInput/FileInput.baseStyles.tsx index 3110bf31c..d065f99aa 100644 --- a/src/core/Form/FileInput/FileInput.baseStyles.tsx +++ b/src/core/Form/FileInput/FileInput.baseStyles.tsx @@ -83,6 +83,7 @@ export const baseStyles = ( align-items: center; gap: ${theme.spacing.insetL}; flex-shrink: 1; + ${font(theme)('bodyTextSmall')}; .fi-icon { width: 24px; diff --git a/src/core/Form/FileInput/FileInput.md b/src/core/Form/FileInput/FileInput.md index 43098eb6d..c99f046ef 100644 --- a/src/core/Form/FileInput/FileInput.md +++ b/src/core/Form/FileInput/FileInput.md @@ -456,8 +456,8 @@ const labelText = 'Resume'; hintText="Allowed file formats are: pdf and docx. Maximum file size is 5 MB" tooltipComponent={ About the resume diff --git a/src/core/Form/FileInput/FileInput.tsx b/src/core/Form/FileInput/FileInput.tsx index daf9eb8db..b6309b3d0 100644 --- a/src/core/Form/FileInput/FileInput.tsx +++ b/src/core/Form/FileInput/FileInput.tsx @@ -405,7 +405,7 @@ const BaseFileInput = (props: InternalFileInputProps) => { if (propOnChange) { propOnChange(newFileList.files); } - if (controlledValue === undefined) { + if (!controlledValue) { if (inputRef.current) { inputRef.current.files = newFileList.files; } @@ -469,17 +469,18 @@ const BaseFileInput = (props: InternalFileInputProps) => { forwardedRef={forkRefs(inputRef, definedRef)} onChange={(event: ChangeEvent) => { const newFileList = new DataTransfer(); - if (controlledValue === undefined) { + const filesFromEvent = event.target.files; + if (!controlledValue) { if (multiFile) { const previousAndNewFiles = Array.from(files || []).concat( - Array.from(event.target.files || []), + Array.from(filesFromEvent || []), ); previousAndNewFiles.forEach((file) => { newFileList.items.add(file); }); } else { - const filesFromEvent = Array.from(event.target.files || []); - filesFromEvent.forEach((file) => { + const filesFromEventArr = Array.from(filesFromEvent || []); + filesFromEventArr.forEach((file) => { newFileList.items.add(file); }); } @@ -489,10 +490,16 @@ const BaseFileInput = (props: InternalFileInputProps) => { buildFileListFromControlledValueObjects(controlledValue) || [], ); - controlledValueAsArray.forEach((file) => - newFileList.items.add(file), - ); - inputRef.current.files = newFileList.files; + const controlledFileList = new DataTransfer(); + controlledValueAsArray.forEach((file) => { + controlledFileList.items.add(file); + newFileList.items.add(file); + }); + inputRef.current.files = controlledFileList.files; + const filesFromEventArr = Array.from(filesFromEvent || []); + filesFromEventArr.forEach((file) => { + newFileList.items.add(file); + }); } if (propOnChange) { propOnChange(newFileList.files); diff --git a/src/core/Form/FileInput/__snapshots__/FileInput.test.tsx.snap b/src/core/Form/FileInput/__snapshots__/FileInput.test.tsx.snap index 23f36e258..0ea92c726 100644 --- a/src/core/Form/FileInput/__snapshots__/FileInput.test.tsx.snap +++ b/src/core/Form/FileInput/__snapshots__/FileInput.test.tsx.snap @@ -324,6 +324,19 @@ exports[`snapshots match error status with statustext 1`] = ` -webkit-flex-shrink: 1; -ms-flex-negative: 1; flex-shrink: 1; + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; + -webkit-text-decoration: none; + text-decoration: none; + word-break: break-word; + overflow-wrap: break-word; + -webkit-font-smoothing: antialiased; + font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; + font-size: 16px; + line-height: 1.5; + font-weight: 400; } .c1.fi-file-input .fi-file-input_file-item .fi-file-input_file-info .fi-icon { @@ -976,6 +989,19 @@ exports[`snapshots match hidden label 1`] = ` -webkit-flex-shrink: 1; -ms-flex-negative: 1; flex-shrink: 1; + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; + -webkit-text-decoration: none; + text-decoration: none; + word-break: break-word; + overflow-wrap: break-word; + -webkit-font-smoothing: antialiased; + font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; + font-size: 16px; + line-height: 1.5; + font-weight: 400; } .c1.fi-file-input .fi-file-input_file-item .fi-file-input_file-info .fi-icon { @@ -1618,6 +1644,19 @@ exports[`snapshots match hint text 1`] = ` -webkit-flex-shrink: 1; -ms-flex-negative: 1; flex-shrink: 1; + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; + -webkit-text-decoration: none; + text-decoration: none; + word-break: break-word; + overflow-wrap: break-word; + -webkit-font-smoothing: antialiased; + font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; + font-size: 16px; + line-height: 1.5; + font-weight: 400; } .c1.fi-file-input .fi-file-input_file-item .fi-file-input_file-info .fi-icon { @@ -2250,6 +2289,19 @@ exports[`snapshots match minimal implementation 1`] = ` -webkit-flex-shrink: 1; -ms-flex-negative: 1; flex-shrink: 1; + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; + -webkit-text-decoration: none; + text-decoration: none; + word-break: break-word; + overflow-wrap: break-word; + -webkit-font-smoothing: antialiased; + font-family: 'Source Sans Pro','Helvetica Neue','Arial',sans-serif; + font-size: 16px; + line-height: 1.5; + font-weight: 400; } .c1.fi-file-input .fi-file-input_file-item .fi-file-input_file-info .fi-icon { From 1021699111aacf9c5a5b7ba49e4d8a2ddd69461f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ilkka=20P=C3=A4ttikangas?= Date: Wed, 14 Aug 2024 12:41:45 +0300 Subject: [PATCH 2/2] FileInput: Move onChange logic to its own function --- src/core/Form/FileInput/FileInput.tsx | 77 ++++++++++++++------------- 1 file changed, 39 insertions(+), 38 deletions(-) diff --git a/src/core/Form/FileInput/FileInput.tsx b/src/core/Form/FileInput/FileInput.tsx index b6309b3d0..f13ae5cb7 100644 --- a/src/core/Form/FileInput/FileInput.tsx +++ b/src/core/Form/FileInput/FileInput.tsx @@ -422,6 +422,44 @@ const BaseFileInput = (props: InternalFileInputProps) => { } }; + const handleOnChange = (event: ChangeEvent) => { + const newFileList = new DataTransfer(); + const filesFromEvent = event.target.files; + if (!controlledValue) { + if (multiFile) { + const previousAndNewFiles = Array.from(files || []).concat( + Array.from(filesFromEvent || []), + ); + previousAndNewFiles.forEach((file) => { + newFileList.items.add(file); + }); + } else { + const filesFromEventArr = Array.from(filesFromEvent || []); + filesFromEventArr.forEach((file) => { + newFileList.items.add(file); + }); + } + setFilesToStateAndInput(newFileList.files); + } else if (inputRef.current) { + const controlledValueAsArray = Array.from( + buildFileListFromControlledValueObjects(controlledValue) || [], + ); + const controlledFileList = new DataTransfer(); + controlledValueAsArray.forEach((file) => { + controlledFileList.items.add(file); + newFileList.items.add(file); + }); + inputRef.current.files = controlledFileList.files; + const filesFromEventArr = Array.from(filesFromEvent || []); + filesFromEventArr.forEach((file) => { + newFileList.items.add(file); + }); + } + if (propOnChange) { + propOnChange(newFileList.files); + } + }; + return ( { type="file" multiple={multiFile} forwardedRef={forkRefs(inputRef, definedRef)} - onChange={(event: ChangeEvent) => { - const newFileList = new DataTransfer(); - const filesFromEvent = event.target.files; - if (!controlledValue) { - if (multiFile) { - const previousAndNewFiles = Array.from(files || []).concat( - Array.from(filesFromEvent || []), - ); - previousAndNewFiles.forEach((file) => { - newFileList.items.add(file); - }); - } else { - const filesFromEventArr = Array.from(filesFromEvent || []); - filesFromEventArr.forEach((file) => { - newFileList.items.add(file); - }); - } - setFilesToStateAndInput(newFileList.files); - } else if (inputRef.current) { - const controlledValueAsArray = Array.from( - buildFileListFromControlledValueObjects(controlledValue) || - [], - ); - const controlledFileList = new DataTransfer(); - controlledValueAsArray.forEach((file) => { - controlledFileList.items.add(file); - newFileList.items.add(file); - }); - inputRef.current.files = controlledFileList.files; - const filesFromEventArr = Array.from(filesFromEvent || []); - filesFromEventArr.forEach((file) => { - newFileList.items.add(file); - }); - } - if (propOnChange) { - propOnChange(newFileList.files); - } - }} + onChange={handleOnChange} onFocus={() => { if (!multiFile && !filePreview && files && files.length === 1) { setMockInputWrapperFocus(true);