diff --git a/packages/smarthr-ui/src/components/AccordionPanel/AccordionPanel.tsx b/packages/smarthr-ui/src/components/AccordionPanel/AccordionPanel.tsx index ad90efeacc..ed3a09fd8d 100644 --- a/packages/smarthr-ui/src/components/AccordionPanel/AccordionPanel.tsx +++ b/packages/smarthr-ui/src/components/AccordionPanel/AccordionPanel.tsx @@ -79,7 +79,6 @@ export const AccordionPanel: React.FC = ({ parentRef, }} > - {/* eslint-disable-next-line smarthr/a11y-delegate-element-has-role-presentation */}
) diff --git a/packages/smarthr-ui/src/components/InputFile/InputFile.tsx b/packages/smarthr-ui/src/components/InputFile/InputFile.tsx index fed78b2c04..60b83ed8f9 100644 --- a/packages/smarthr-ui/src/components/InputFile/InputFile.tsx +++ b/packages/smarthr-ui/src/components/InputFile/InputFile.tsx @@ -1,4 +1,5 @@ 'use client' + import React, { ComponentPropsWithRef, ReactNode, @@ -86,6 +87,7 @@ export const InputFile = forwardRef( hasFileList = true, onChange, disabled = false, + multiple, error, decorators, ...props @@ -129,15 +131,30 @@ export const InputFile = forwardRef( [decorators], ) - const updateFiles = useCallback( + const updateInputValue = useCallback( (newFiles: File[]) => { - if (onChange) { - onChange(newFiles) + if (!inputRef.current) { + return } + const buff = new DataTransfer() + newFiles.forEach((file) => { + buff.items.add(file) + }) + + isUpdatingFilesDirectly.current = true + inputRef.current.files = buff.files + isUpdatingFilesDirectly.current = false + }, + [inputRef], + ) + const updateFiles = useCallback( + (newFiles: File[]) => { + onChange?.(newFiles) + updateInputValue(newFiles) setFiles(newFiles) }, - [setFiles, onChange], + [setFiles, onChange, updateInputValue], ) const handleChange = useCallback( @@ -146,9 +163,16 @@ export const InputFile = forwardRef( return } - updateFiles(Array.from(e.target.files ?? [])) + const newFiles = Array.from(e.target.files ?? []) + + if (multiple) { + // multipleの場合、すでに選択済みのファイルと結合する + updateFiles([...files, ...newFiles]) + } else { + updateFiles(newFiles) + } }, - [isUpdatingFilesDirectly, updateFiles], + [files, isUpdatingFilesDirectly, updateFiles, multiple], ) const handleDelete = useCallback( @@ -161,18 +185,8 @@ export const InputFile = forwardRef( const newFiles = files.filter((_, i) => index !== i) updateFiles(newFiles) - - const buff = new DataTransfer() - - newFiles.forEach((file) => { - buff.items.add(file) - }) - - isUpdatingFilesDirectly.current = true - inputRef.current.files = buff.files - isUpdatingFilesDirectly.current = false }, - [files, isUpdatingFilesDirectly, inputRef, updateFiles], + [files, inputRef, updateFiles], ) return ( @@ -180,7 +194,7 @@ export const InputFile = forwardRef( {!disabled && hasFileList && files.length > 0 && ( {files.map((file, index) => ( -
  • +
  • {file.name}