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(
+
+
+ ,
+ );
+
+ 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(
),
};
+export const IsRequired = {
+ render: (props: Story) => (
+
+ ),
+};
export const WithEllipsis = {
render: (props: Story) => (