feat: add autofocus prop (#442)

emilkowalski · Sep 24, 2024 · 2a32c61 · 2a32c61
1 parent 2b1be8b
commit 2a32c61
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 4 deletions.
diff --git a/src/context.ts b/src/context.ts
@@ -29,6 +29,7 @@ interface DrawerContextValue {
   noBodyStyles: boolean;
   handleOnly?: boolean;
   container?: HTMLElement | null;
+  autoFocus?: boolean;
 }
 
 export const DrawerContext = React.createContext<DrawerContextValue>({
@@ -59,6 +60,7 @@ export const DrawerContext = React.createContext<DrawerContextValue>({
   setBackgroundColorOnScale: true,
   noBodyStyles: false,
   container: null,
+  autoFocus: false,
 });
 
 export const useDrawerContext = () => {

diff --git a/src/index.tsx b/src/index.tsx
@@ -60,6 +60,7 @@ export type DialogProps = {
   container?: HTMLElement | null;
   onAnimationEnd?: (open: boolean) => void;
   preventScrollRestoration?: boolean;
+  autoFocus?: boolean;
 } & (WithFadeFromProps | WithoutFadeFromProps);
 
 export function Root({
@@ -91,6 +92,7 @@ export function Root({
   repositionInputs = true,
   onAnimationEnd,
   container,
+  autoFocus = false,
 }: DialogProps) {
   const [isOpen = false, setIsOpen] = useControllableState({
     defaultProp: defaultOpen,
@@ -638,7 +640,7 @@ export function Root({
     <DialogPrimitive.Root
       defaultOpen={defaultOpen}
       onOpenChange={(open) => {
-        if (!dismissible) return;
+        if (!dismissible && !open) return;
         if (open) {
           setHasBeenOpened(true);
         } else {
@@ -677,6 +679,7 @@ export function Root({
           setBackgroundColorOnScale,
           noBodyStyles,
           container,
+          autoFocus,
         }}
       >
         {children}
@@ -710,7 +713,7 @@ Overlay.displayName = 'Drawer.Overlay';
 export type ContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>;
 
 export const Content = React.forwardRef<HTMLDivElement, ContentProps>(function (
-  { onPointerDownOutside, style, ...rest },
+  { onPointerDownOutside, style, onOpenAutoFocus, ...rest },
   ref,
 ) {
   const {
@@ -726,6 +729,7 @@ export const Content = React.forwardRef<HTMLDivElement, ContentProps>(function (
     snapPoints,
     container,
     handleOnly,
+    autoFocus,
   } = useDrawerContext();
   // Needed to use transition instead of animations
   const [delayedSnapPoints, setDelayedSnapPoints] = React.useState(false);
@@ -797,7 +801,13 @@ export const Content = React.forwardRef<HTMLDivElement, ContentProps>(function (
         pointerStartRef.current = { x: event.pageX, y: event.pageY };
         onPress(event);
       }}
-      onOpenAutoFocus={(e) => e.preventDefault()}
+      onOpenAutoFocus={(e) => {
+        onOpenAutoFocus?.(e);
+
+        if (!autoFocus) {
+          e.preventDefault();
+        }
+      }}
       onPointerDownOutside={(e) => {
         onPointerDownOutside?.(e);
 

diff --git a/test/src/app/scrollable-with-inputs/page.tsx b/test/src/app/scrollable-with-inputs/page.tsx
@@ -5,7 +5,7 @@ import { Drawer } from 'vaul';
 export default function Page() {
   return (
     <div className="w-screen h-screen bg-white p-8 flex justify-center items-center" data-vaul-drawer-wrapper="">
-      <Drawer.Root>
+      <Drawer.Root autoFocus={true}>
         <Drawer.Trigger asChild>
           <button>Open Drawer</button>
         </Drawer.Trigger>