From 3a011d96ced3a2919e31f096ec6d8ed7b9fefa4c Mon Sep 17 00:00:00 2001
From: Geoffroy Baccarini <geoffroy.baccarini@qlik.com>
Date: Thu, 19 Dec 2024 11:18:33 +0100
Subject: [PATCH] fix(InlineEdit): handle required property in InlineEdit

---
 .changeset/spotty-ads-cheer.md                |  5 +++
 .../InlineEditing/InlineEditing.test.tsx      | 31 +++++++++++++++++++
 .../Primitives/InlineEditingPrimitive.tsx     |  8 +++++
 .../stories/form/InlineEditing.stories.tsx    | 12 +++++++
 4 files changed, 56 insertions(+)
 create mode 100644 .changeset/spotty-ads-cheer.md

diff --git a/.changeset/spotty-ads-cheer.md b/.changeset/spotty-ads-cheer.md
new file mode 100644
index 00000000000..4f6f176ebba
--- /dev/null
+++ b/.changeset/spotty-ads-cheer.md
@@ -0,0 +1,5 @@
+---
+'@talend/design-system': patch
+---
+
+InlineEdit should take into account the required property to not submit the input
diff --git a/packages/design-system/src/components/InlineEditing/InlineEditing.test.tsx b/packages/design-system/src/components/InlineEditing/InlineEditing.test.tsx
index 667caade908..4f750000ab1 100644
--- a/packages/design-system/src/components/InlineEditing/InlineEditing.test.tsx
+++ b/packages/design-system/src/components/InlineEditing/InlineEditing.test.tsx
@@ -48,4 +48,35 @@ describe('InlineEditing', () => {
 
 		expect(screen.getByTestId('my-prefix.inlineediting.button.edit')).toBeInTheDocument();
 	});
+
+	it('should not allow to submit required input', async () => {
+		const onEdit = jest.fn();
+		render(
+			<main>
+				<InlineEditing
+					label="Edit the value"
+					placeholder="What is your Lorem Ipsum?"
+					defaultValue=""
+					onEdit={onEdit}
+					required
+				/>
+			</main>,
+		);
+
+		fireEvent.click(screen.getByTestId('inlineediting.button.edit'));
+
+		expect(
+			screen.getByRole('button', {
+				name: /submit/i,
+			}),
+		).toBeDisabled();
+
+		fireEvent.keyDown(
+			screen.getByRole('textbox', {
+				name: /edit the value\*/i,
+			}),
+			'Enter',
+		);
+		expect(onEdit).not.toHaveBeenCalled();
+	});
 });
diff --git a/packages/design-system/src/components/InlineEditing/Primitives/InlineEditingPrimitive.tsx b/packages/design-system/src/components/InlineEditing/Primitives/InlineEditingPrimitive.tsx
index 90705686faa..ce3b74a7a85 100644
--- a/packages/design-system/src/components/InlineEditing/Primitives/InlineEditingPrimitive.tsx
+++ b/packages/design-system/src/components/InlineEditing/Primitives/InlineEditingPrimitive.tsx
@@ -139,6 +139,9 @@ const InlineEditingPrimitive = forwardRef(
 
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 		const getValue = () => (onChangeValue ? value : internalValue);
+		const inputIsValid = () => {
+			return !required || !!getValue();
+		};
 
 		const toggleEditionMode = (isEditionMode: boolean) => {
 			editionModeControl.onChange(isEditionMode);
@@ -156,6 +159,10 @@ const InlineEditingPrimitive = forwardRef(
 		const handleSubmit = (event: OnEditEvent) => {
 			event.stopPropagation();
 
+			if (!inputIsValid()) {
+				return;
+			}
+
 			if (onEdit) {
 				onEdit(event, getValue() || '');
 			}
@@ -273,6 +280,7 @@ const InlineEditingPrimitive = forwardRef(
 									</ButtonIcon>
 									<ButtonIcon
 										onClick={handleSubmit}
+										disabled={!inputIsValid()}
 										icon="check-filled"
 										data-test={`${dataTest ? `${dataTest}.` : ''}inlineediting.button.submit`}
 										data-testid={`${dataTestId ? `${dataTestId}.` : ''}inlineediting.button.submit`}
diff --git a/packages/design-system/src/stories/form/InlineEditing.stories.tsx b/packages/design-system/src/stories/form/InlineEditing.stories.tsx
index 70f05108592..9b1c15f7b26 100644
--- a/packages/design-system/src/stories/form/InlineEditing.stories.tsx
+++ b/packages/design-system/src/stories/form/InlineEditing.stories.tsx
@@ -84,6 +84,18 @@ export const Default = {
 		/>
 	),
 };
+export const IsRequired = {
+	render: (props: Story) => (
+		<InlineEditing.Text
+			placeholder="Input a crawler name"
+			label="Crawler name"
+			required
+			defaultValue=""
+			onEdit={action('onEdit')}
+			{...props}
+		/>
+	),
+};
 export const WithEllipsis = {
 	render: (props: Story) => (
 		<InlineEditing.Text