feat: add intitial code

razorpay · Jan 8, 2025 · fce9cb9 · fce9cb9
1 parent 94cf1d2
commit fce9cb9
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 7 deletions.
diff --git a/packages/blade/src/components/Dropdown/DropdownHeaderFooter.tsx b/packages/blade/src/components/Dropdown/DropdownHeaderFooter.tsx
@@ -21,6 +21,7 @@ type DropdownHeaderProps = Pick<
   | 'trailing'
   | 'titleSuffix'
   | 'testID'
+  | 'children'
   | keyof DataAnalyticsAttribute
 >;
 
@@ -31,6 +32,7 @@ const _DropdownHeader = ({
   titleSuffix,
   trailing,
   testID,
+  children,
   ...rest
 }: DropdownHeaderProps): React.ReactElement => {
   return (
@@ -59,7 +61,9 @@ const _DropdownHeader = ({
         // close button
         showCloseButton={false}
         {...makeAnalyticsAttribute(rest)}
-      />
+      >
+        {children}
+      </BaseHeader>
     </BaseBox>
   );
 };

diff --git a/packages/blade/src/components/Dropdown/docs/DropdownWithSelect.stories.tsx b/packages/blade/src/components/Dropdown/docs/DropdownWithSelect.stories.tsx
@@ -16,7 +16,7 @@ import {
 } from './stories';
 
 import { Sandbox } from '~utils/storybook/Sandbox';
-import { SelectInput } from '~components/Input/DropdownInputTriggers';
+import { AutoComplete, SelectInput } from '~components/Input/DropdownInputTriggers';
 import {
   ActionList,
   ActionListItem,
@@ -27,6 +27,7 @@ import {
 import { HomeIcon } from '~components/Icons';
 import { Button } from '~components/Button';
 import { Box } from '~components/Box';
+import { SearchInput } from '~components/Input/SearchInput';
 
 const DropdownStoryMeta: Meta = {
   title: 'Components/Dropdown/With Select',
@@ -409,6 +410,26 @@ InternalSectionListPerformance.parameters = {
   },
 };
 
+export const InternalDropdownWithSearch = (): React.ReactElement => {
+  return (
+    <Dropdown selectionType="multiple">
+      <SelectInput label="Select fruits" />
+      <DropdownOverlay>
+        <DropdownHeader>
+          <AutoComplete label="Search Fruits" />
+        </DropdownHeader>
+        <ActionList>
+          <ActionListItem title="Apples" value="Apples" />
+          <ActionListItem title="Appricots" value="Appricots" />
+          <ActionListItem title="Cherries" value="Cherries" />
+          <ActionListItem title="Crab apples" value="Crab apples" />
+          <ActionListItem title="Jambolan" value="Jambolan" />
+        </ActionList>
+      </DropdownOverlay>
+    </Dropdown>
+  );
+};
+
 export const InternalDropdownPerformance = (): React.ReactElement => {
   const fruits = [
     'Apples',

diff --git a/packages/blade/src/components/Input/DropdownInputTriggers/BaseDropdownInputTrigger.tsx b/packages/blade/src/components/Input/DropdownInputTriggers/BaseDropdownInputTrigger.tsx
@@ -236,8 +236,9 @@ const _BaseDropdownInputTrigger = (
     <BaseInput
       as={props.isSelectInput ? 'button' : 'input'}
       ref={
-        (!isReactNative()
-          ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (isReactNative() || hasAutoCompleteInBottomSheetHeader
+          ? null
+          : // eslint-disable-next-line @typescript-eslint/no-explicit-any
             (node: any) => {
               triggererRef.current = node;
               if (ref) {
@@ -247,12 +248,14 @@ const _BaseDropdownInputTrigger = (
                   ref.current = node;
                 }
               }
-            }
-          : null) as never
+            }) as never
       }
       isDropdownTrigger={true}
       setInputWrapperRef={(wrapperNode) => {
-        triggererWrapperRef.current = wrapperNode;
+        // when autocomplete is in header, its not a trigger but a component inside of DropdownOverlay
+        if (!hasAutoCompleteInBottomSheetHeader) {
+          triggererWrapperRef.current = wrapperNode;
+        }
       }}
       maxTagRows={props.maxRows ?? 'single'}
       tags={getTags({ size: props.size || 'medium' })}