fix: handle focus show tags behaviour

razorpay · Apr 4, 2024 · d85b9b7 · d85b9b7
1 parent b3a2296
commit d85b9b7
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git 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 (
     <Box padding="spacing.5" maxWidth="300px">
       <Dropdown selectionType="multiple">
-        <SelectInput label="Select City" maxRows="single" />
+        <SelectInput label="Select City" maxRows="multiple" />
         <DropdownOverlay>
           <DropdownHeader title="Header Title" subtitle="Header subtitle" />
           <ActionList>

diff --git 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<BladeElementRef, TextAreaProps>
   const inputRef = React.useRef<BladeElementRef>(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<BladeElementRef, TextAreaProps>
     <BaseInput
       as="textarea"
       id="textarea"
+      maxTagRows="multiple"
       componentName={MetaConstants.TextArea}
       autoFocus={autoFocus}
       ref={mergedRef}
@@ -223,7 +225,7 @@ const _TextArea: React.ForwardRefRenderFunction<BladeElementRef, TextAreaProps>
       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<BladeElementRef, TextAreaProps>
 
         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<BladeElementRef, TextAreaProps>
           onTagChange?.({ tags: currentTags.slice(0, -1) });
         }
       }}
-      onBlur={onBlur}
       onSubmit={onSubmit}
       trailingFooterSlot={(value) => {
         return maxCharacters ? (