fix(InlineEdit): handle required property in InlineEdit (#5478)

.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

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();
+	});
 });

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`}

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