diff --git a/packages/blade/src/components/Input/BaseInput/useTaggedInput.ts b/packages/blade/src/components/Input/BaseInput/useTaggedInput.ts index b7971bb429a..7b6dc6fbb88 100644 --- a/packages/blade/src/components/Input/BaseInput/useTaggedInput.ts +++ b/packages/blade/src/components/Input/BaseInput/useTaggedInput.ts @@ -33,6 +33,7 @@ const useTaggedInput = ({ getTags: ({ size }: { size: NonNullable }) => React.ReactElement[]; handleTaggedInputKeydown: (e: FormInputOnKeyDownEvent) => void; handleTaggedInputChange: FormInputOnEvent; + handleTagsClear: () => void; } => { const [activeTagIndex, setActiveTagIndex] = React.useState(-1); const [inputValueUncontrolled, setInputValueUncontrolled] = React.useState(defaultValue ?? ''); @@ -79,9 +80,24 @@ const useTaggedInput = ({ ); const handleTaggedInputChange: FormInputOnEvent = ({ value }) => { + if (!isTaggedInput) { + return; + } setInputValueUncontrolled(value ?? ''); }; + const handleTagsClear = (): void => { + if (!isTaggedInput) { + return; + } + + if (!isTagsControlled) { + setTagsUncontrolled([]); + } + + onTagChange?.({ tags: [] }); + }; + const clearInput = (): void => { const isControlledValue = Boolean(value); @@ -143,6 +159,7 @@ const useTaggedInput = ({ getTags, handleTaggedInputKeydown, handleTaggedInputChange, + handleTagsClear, }; }; diff --git a/packages/blade/src/components/Input/TextArea/TextArea.tsx b/packages/blade/src/components/Input/TextArea/TextArea.tsx index a2ebea15a3d..91c5e0d2d83 100644 --- a/packages/blade/src/components/Input/TextArea/TextArea.tsx +++ b/packages/blade/src/components/Input/TextArea/TextArea.tsx @@ -134,6 +134,7 @@ const _TextArea: React.ForwardRefRenderFunction getTags, handleTaggedInputKeydown, handleTaggedInputChange, + handleTagsClear, } = useTaggedInput({ tags, onTagChange, @@ -169,6 +170,7 @@ const _TextArea: React.ForwardRefRenderFunction inputRef.current.focus(); } } + handleTagsClear(); // if the input field is controlled just call the click handler and the value change shall be left upto the consumer onClearButtonClick?.(); inputRef?.current?.focus(); diff --git a/packages/blade/src/components/Input/TextInput/TextInput.stories.tsx b/packages/blade/src/components/Input/TextInput/TextInput.stories.tsx index a36b7c4cfe7..8e607d8132e 100644 --- a/packages/blade/src/components/Input/TextInput/TextInput.stories.tsx +++ b/packages/blade/src/components/Input/TextInput/TextInput.stories.tsx @@ -590,7 +590,7 @@ export const TextInputWithControlledTags: StoryFn = ( {...args} isTaggedInput={true} tags={tags} - showClearButton={true} + showClearButton={false} onTagChange={({ tags }) => { setTags(tags); }} diff --git a/packages/blade/src/components/Input/TextInput/TextInput.tsx b/packages/blade/src/components/Input/TextInput/TextInput.tsx index fa3bfee3bf8..baa36f0a5a1 100644 --- a/packages/blade/src/components/Input/TextInput/TextInput.tsx +++ b/packages/blade/src/components/Input/TextInput/TextInput.tsx @@ -186,6 +186,7 @@ const _TextInput: React.ForwardRefRenderFunction