feat: update bottom sheet behavior

LogRock · Sep 19, 2023 · 8699a37 · 8699a37
1 parent 3e0cf35
commit 8699a37
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 6 deletions.
diff --git a/lib/components/Select2/Select.tsx b/lib/components/Select2/Select.tsx
@@ -97,6 +97,7 @@ function Select<
   useBottomSheet,
   bottomSheetFooter,
   bottomSheetHeader,
+  bottomSheetPlaceholder,
   ...props
 }: Props<Option, IsMulti, Group> & CustomSelectProps) {
   // only used for bottom sheet mode
@@ -226,13 +227,21 @@ function Select<
           setMenuIsOpen(true);
           props.onMenuOpen?.();
         }}
+        onFocus={(e) => {
+          props.onFocus?.(e);
+
+          if (useBottomSheet) {
+            e.currentTarget.blur();
+          }
+        }}
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         maxMenuHeight={useBottomSheet ? "100%" : 200}
         label={label}
         setMenuIsOpen={setMenuIsOpen}
         bottomSheetHeader={bottomSheetHeader}
         bottomSheetFooter={bottomSheetFooter}
+        bottomSheetPlaceholder={bottomSheetPlaceholder}
       />
       {helper && (
         <HelperDiv>

diff --git a/lib/components/Select2/Select.types.ts b/lib/components/Select2/Select.types.ts
@@ -11,4 +11,5 @@ export interface CustomSelectProps {
   useBottomSheet?: boolean;
   bottomSheetFooter?: React.ReactNode;
   bottomSheetHeader?: React.ReactNode;
+  bottomSheetPlaceholder?: string;
 }
diff --git a/lib/components/Select2/SelectBottomSheet.tsx b/lib/components/Select2/SelectBottomSheet.tsx
@@ -22,7 +22,8 @@ export default function SelectBottomSheet(props: MenuProps) {
 
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
-  const { bottomSheetFooter, bottomSheetHeader } = props.selectProps;
+  const { bottomSheetFooter, bottomSheetHeader, bottomSheetPlaceholder } =
+    props.selectProps;
 
   return (
     <BottomSheet
@@ -38,12 +39,13 @@ export default function SelectBottomSheet(props: MenuProps) {
         maxHeight * 0.9,
         maxHeight,
       ]}
-      defaultSnap={({ maxHeight }) => maxHeight * 0.7}
+      defaultSnap={({ maxHeight }) => maxHeight * 0.9}
+      initialFocusRef={false}
       header={
         <>
           <InputBox
             type="text"
-            placeholder="Type Here"
+            placeholder={bottomSheetPlaceholder || "Type Here"}
             startIcon={<BsSearch />}
             spaceAfter="xxxbig"
             value={inputValue}
@@ -54,9 +56,11 @@ export default function SelectBottomSheet(props: MenuProps) {
               })
             }
           />
-          <StyledText type="overlineLarge" color="neutral" shade="400">
-            {label}
-          </StyledText>
+          {label && (
+            <StyledText type="overlineLarge" color="neutral" shade="400">
+              {label}
+            </StyledText>
+          )}
           {bottomSheetHeader}
         </>
       }

diff --git a/src/stories/components/select/Select.stories.tsx b/src/stories/components/select/Select.stories.tsx
@@ -149,4 +149,5 @@ BottomSheetWithHeaderAndFooter.args = {
   useBottomSheet: true,
   bottomSheetHeader: <p>Header</p>,
   bottomSheetFooter: <p>Footer</p>,
+  bottomSheetPlaceholder: "bottomSheetPlaceholder",
 };