fix(react): fix z-index issues with DateField inside a Drawer (#181)

* fix(react): fix z-index issues with DateField inside a Drawer * chore(change): add change
jonambas · Nov 17, 2023 · 02ab2d2 · 02ab2d2
1 parent e446be0
commit 02ab2d2
Show file tree

Hide file tree

Showing 5 changed files with 244 additions and 24 deletions.
diff --git a/.changeset/metal-students-add.md b/.changeset/metal-students-add.md
@@ -0,0 +1,5 @@
+---
+'@sweatpants/react': patch
+---
+
+Fix DateField z-index when rendered inside a Drawer
diff --git a/libra/components/Drawer.libra.tsx b/libra/components/Drawer.libra.tsx
@@ -1,4 +1,11 @@
-import { Button, Text, Drawer, Stack } from '../../packages/react/src';
+import {
+  Button,
+  Text,
+  Drawer,
+  Stack,
+  DateField,
+  Select
+} from '../../packages/react/src';
 
 directory('Drawer', () => {
   add('Default', () => {
@@ -8,6 +15,11 @@ directory('Drawer', () => {
           <Text looksLike="h4" element="h2">
             Drawer
           </Text>
+          <DateField id="date" />
+          <Select id="select">
+            <Select.Item value="foo">Foo</Select.Item>
+            <Select.Item value="bar">Bar</Select.Item>
+          </Select>
           <Button>Button</Button>
         </Stack>
       </Drawer>

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -29,9 +29,9 @@
     "@types/date-fns": "2.6.0"
   },
   "dependencies": {
-    "@radix-ui/react-dialog": "1.0.4",
+    "@radix-ui/react-dialog": "1.0.5",
     "@radix-ui/react-popover": "1.0.7",
-    "@radix-ui/react-select": "1.2.2",
+    "@radix-ui/react-select": "2.0.0",
     "@radix-ui/react-slot": "1.0.2",
     "@react-hook/resize-observer": "1.2.6",
     "date-fns": "2.30.0",

diff --git a/packages/react/src/date-field/DateField.tsx b/packages/react/src/date-field/DateField.tsx
@@ -27,12 +27,14 @@ export type DateFieldProps = Omit<
   onValueChange?: (value: Date) => void;
   fromDate?: Date;
   toDate?: Date;
+  className?: string;
 };
 
 const DateField = forwardRef<HTMLInputElement, DateFieldProps>(
   (props, userRef) => {
     const {
       align = 'left',
+      className,
       id,
       defaultValue,
       value,
@@ -45,6 +47,8 @@ const DateField = forwardRef<HTMLInputElement, DateFieldProps>(
       toDate = addYears(new Date(), 20)
     } = props;
 
+    const [open, setOpen] = useState(false);
+
     const dayToString = (day: Date) => {
       return format(day, 'MM/dd/yyyy');
     };
@@ -106,11 +110,12 @@ const DateField = forwardRef<HTMLInputElement, DateFieldProps>(
     };
 
     return (
-      <Popover.Root>
-        <Popover.Trigger>
+      <Popover.Root open={open} onOpenChange={setOpen}>
+        <Popover.Trigger asChild>
           <TextField
             align={align}
             autoComplete="off"
+            className={className}
             size={size}
             id={id}
             type="text"
@@ -119,26 +124,32 @@ const DateField = forwardRef<HTMLInputElement, DateFieldProps>(
             hideLabel={hideLabel}
             placeholder="MM/DD/YYYY"
             value={internalValue}
-            onChange={handleFieldOnChange}
+            onChange={(e) => {
+              if (!open) {
+                setOpen(true);
+              }
+              handleFieldOnChange(e);
+            }}
             ref={userRef}
           />
         </Popover.Trigger>
-        <Popover.Portal>
-          <Popover.Content asChild onOpenAutoFocus={(e) => e.preventDefault()}>
-            <Card kind="elevated" className={css({ m: '3' })}>
-              <DatePicker
-                onMonthChange={(d) => {
-                  setDisplayMonth(d);
-                }}
-                month={displayMonth}
-                selected={datePickerValue}
-                onSelect={onDatePickerSelect}
-                fromDate={fromDate}
-                toDate={toDate}
-              />
-            </Card>
-          </Popover.Content>
-        </Popover.Portal>
+        <Popover.Content asChild onOpenAutoFocus={(e) => e.preventDefault()}>
+          <Card
+            kind="elevated"
+            className={css({ position: 'relative', m: '3', zIndex: '20' })}
+          >
+            <DatePicker
+              onMonthChange={(d) => {
+                setDisplayMonth(d);
+              }}
+              month={displayMonth}
+              selected={datePickerValue}
+              onSelect={onDatePickerSelect}
+              fromDate={fromDate}
+              toDate={toDate}
+            />
+          </Card>
+        </Popover.Content>
       </Popover.Root>
     );
   }