fix(TDOPS-4682): Fix design system form file to integrate on TMC

.changeset/lovely-apricots-behave.md

@@ -0,0 +1,5 @@
+---
+'@talend/design-system': patch
+---
+
+Design system - Form file will now update on files prop change and will trigger onChange when file is cleared

packages/design-system/src/components/Form/Field/Input/Input.File.cy.tsx

@@ -0,0 +1,36 @@
+import InputFile from './Input.File';
+
+context('<Form.File />', () => {
+	const defaultProps = {
+		label: 'Select file here',
+		name: 'file',
+	};
+	it('should render', () => {
+		cy.mount(<InputFile {...defaultProps} />);
+
+		cy.get('label').should('have.text', defaultProps.label);
+		cy.get('ol[role="list"]').should('not.exist');
+		cy.get('button').should('not.exist');
+	});
+
+	it('should render with filled value', () => {
+		cy.mount(<InputFile {...defaultProps} files={['file.js']} />);
+
+		cy.get('ol[role="list"]').should('have.text', 'file.js');
+		cy.get('button').should('exist');
+	});
+
+	it('should trigger dom events', () => {
+		cy.document().then(doc => {
+			doc.addEventListener('change', cy.stub().as('onChange'));
+		});
+
+		cy.mount(<InputFile {...defaultProps} />);
+
+		cy.get('input').selectFile(Cypress.Buffer.from('Hello world'));
+		cy.get('@onChange').should('have.been.calledOnce');
+
+		cy.get('button').click({ force: true });
+		cy.get('@onChange').should('have.been.calledTwice');
+	});
+});

packages/design-system/src/components/Form/Field/Input/Input.File.tsx

@@ -29,18 +29,22 @@ function getFileSize(size: number, t: TFunction) {
 
 type InputType = Omit<InputPrimitiveProps, 'type' | 'className' | 'style' | 'prefix' | 'suffix'>;
 type FileProps = InputType & {
-	files?: string[] | FileList;
+	files?: string[] | FileList | null;
 };
 
 const InputFile = forwardRef((props: FileProps, ref: Ref<HTMLInputElement>) => {
 	const [drag, setDrag] = useState(false);
-	const [files, setFiles] = useState(props.files || null);
+	const [files, setFiles] = useState<string[] | FileList | null>();
 
 	const inputRef = useRef<HTMLInputElement | null>(null);
 	const { t } = useTranslation(I18N_DOMAIN_DESIGN_SYSTEM);
 
 	const { hasError, ...rest } = props;
 
+	useEffect(() => {
+		setFiles(props.files);
+	}, [props.files]);
+
 	function handleChange() {
 		const input = inputRef.current;
 		if (input) {
@@ -52,6 +56,7 @@ const InputFile = forwardRef((props: FileProps, ref: Ref<HTMLInputElement>) => {
 		const input = inputRef.current;
 		if (input) {
 			input.value = '';
+			input.dispatchEvent(new Event('change', { bubbles: true }));
 		}
 		setFiles(() => null);
 	}