keep focus state when calendar is open

buildo · Aug 30, 2023 · 8a4958b · 8a4958b
1 parent b20ffa9
commit 8a4958b
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 6 deletions.
diff --git a/packages/bento-design-system/src/DateField/DateField.css.ts b/packages/bento-design-system/src/DateField/DateField.css.ts
@@ -35,15 +35,15 @@ export const dateFieldRecipe = strictRecipe({
       invalid: {},
       notSet: {},
     },
-    isFocused: {
+    isCalendarOpen: {
       true: {},
     },
   },
   compoundVariants: [
     {
       variants: {
         validation: "valid",
-        isFocused: true,
+        isCalendarOpen: true,
       },
       style: bentoSprinkles({
         boxShadow: { default: "outlineInputFocus", hover: "outlineInputFocus" },
@@ -52,7 +52,7 @@ export const dateFieldRecipe = strictRecipe({
     {
       variants: {
         validation: "invalid",
-        isFocused: true,
+        isCalendarOpen: true,
       },
       style: bentoSprinkles({
         boxShadow: { default: "outlineNegativeStrong", hover: "outlineNegativeStrong" },

diff --git a/packages/bento-design-system/src/DateField/DateField.tsx b/packages/bento-design-system/src/DateField/DateField.tsx
@@ -81,7 +81,13 @@ function SingleDateField({ disabled, readOnly, ...props }: Extract<Props, { type
       errorMessageProps={errorMessageProps}
     >
       <Box {...groupProps} ref={ref}>
-        <Input type="single" fieldProps={fieldProps} buttonProps={buttonProps} ref={ref} />
+        <Input
+          type="single"
+          fieldProps={fieldProps}
+          buttonProps={buttonProps}
+          ref={ref}
+          isCalendarOpen={state.isOpen}
+        />
       </Box>
       {state.isOpen && (
         <Calendar
@@ -160,6 +166,7 @@ function RangeDateField({ disabled, readOnly, ...props }: Extract<Props, { type:
           fieldProps={{ start: startFieldProps, end: endFieldProps }}
           buttonProps={buttonProps}
           ref={ref}
+          isCalendarOpen={state.isOpen}
         />
       </Box>
       {state.isOpen && (

diff --git a/packages/bento-design-system/src/DateField/Input.tsx b/packages/bento-design-system/src/DateField/Input.tsx
@@ -34,6 +34,7 @@ type Props = (
     }
 ) & {
   buttonProps: AriaButtonProps<"button">;
+  isCalendarOpen: boolean;
   ref: RefObject<HTMLInputElement>;
 };
 
@@ -124,7 +125,7 @@ export function Input(props: Props) {
           size: config.fontSize,
           ellipsis: false,
         }),
-        dateFieldRecipe({ validation: validationState }),
+        dateFieldRecipe({ validation: validationState, isCalendarOpen: props.isCalendarOpen }),
         {
           readOnly: isReadOnly,
         },

diff --git a/packages/bento-design-system/stories/Components/DateField.stories.tsx b/packages/bento-design-system/stories/Components/DateField.stories.tsx
@@ -97,7 +97,7 @@ export const DisabledDates = {
 };
 export const CalendarOpen = {
   args: {
-    value: today,
+    value: new CalendarDate(2022, 2, 4),
   },
   play: async () => {
     const button = screen.getByRole("button");