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) => (