diff --git a/packages/blade/src/components/Dropdown/docs/DropdownWithSelect.stories.tsx b/packages/blade/src/components/Dropdown/docs/DropdownWithSelect.stories.tsx index 9c3ee32769d..d5594e3d40f 100644 --- a/packages/blade/src/components/Dropdown/docs/DropdownWithSelect.stories.tsx +++ b/packages/blade/src/components/Dropdown/docs/DropdownWithSelect.stories.tsx @@ -198,7 +198,7 @@ export const InternalMultiSelect = (): React.ReactElement => { return ( - + diff --git a/packages/blade/src/components/Input/TextArea/TextArea.tsx b/packages/blade/src/components/Input/TextArea/TextArea.tsx index a7f60461d46..9ce6cc0ad6e 100644 --- a/packages/blade/src/components/Input/TextArea/TextArea.tsx +++ b/packages/blade/src/components/Input/TextArea/TextArea.tsx @@ -130,6 +130,7 @@ const _TextArea: React.ForwardRefRenderFunction const inputRef = React.useRef(null); const mergedRef = useMergeRefs(ref, inputRef); const [activeTagIndex, setActiveTagIndex] = React.useState(-1); + const [isInputFocussed, setIsInputFocussed] = React.useState(false); const [shouldShowClearButton, setShouldShowClearButton] = React.useState(false); @@ -215,6 +216,7 @@ const _TextArea: React.ForwardRefRenderFunction activeTagIndex={activeTagIndex} setActiveTagIndex={setActiveTagIndex} isDropdownTrigger={isTaggedInput} - showAllTags={true} + showAllTags={isInputFocussed} accessibilityLabel={accessibilityLabel} hideLabelText={!Boolean(label)} labelPosition={labelPosition} @@ -254,7 +256,14 @@ const _TextArea: React.ForwardRefRenderFunction onChange?.({ name, value }); }} - onFocus={onFocus} + onFocus={(e) => { + setIsInputFocussed(true); + onFocus?.(e); + }} + onBlur={(e) => { + setIsInputFocussed(false); + onBlur?.(e); + }} onKeyDown={(e) => { if (!isTaggedInput) { return; @@ -283,7 +292,6 @@ const _TextArea: React.ForwardRefRenderFunction onTagChange?.({ tags: currentTags.slice(0, -1) }); } }} - onBlur={onBlur} onSubmit={onSubmit} trailingFooterSlot={(value) => { return maxCharacters ? (