Disable auto focus on dialog open

[kylerphillips]

I'm using the default Dialog component with input fields from the shadcn docs.

I wanted to know if it's possible to disable the auto focus on inputs when the dialog opens?

[riculum]

The same question arises for the Sheet component 👍

[SoyDiego]

Maybe I'm wrong but I think is necessary for Accessibility.

[riculum]

Maybe but then it should be possible to change the first focus element

[PiotrWarzachowski]

I wanted to contribute a bit by making this open source project, where I used shadcn , you can contribute and customize some objects if you want, here is my repo : https://github.com/PiotrWarzachowski/DocMind Feel free to check it out, its public on vercel. You can leave a star ⭐ if you want 💓. Have a good year

[HereOrCode]

[S4hil-Yadav]

i wanna marry u bro

[lukebrandonfarrell]

Hey @S4hil-Yadav he's mine

[S4hil-Yadav]

Hey @S4hil-Yadav he's mine

You're gonna hav to fight me to death for that

[surajondev]

onOpenAutoFocus={(e) => e.preventDefault()

Easy to copy paste.

[truethari]

onOpenAutoFocus={(e) => e.preventDefault()

onOpenAutoFocus={(e) => e.preventDefault()}

you missed a bracket

[Rezahy]

just add "tabIndex={-1}" on the input element.

[azizdevuz]

Vue.

<DialogContent @openAutoFocus="(e:Event) => e.preventDefault()">

[Gwizdo51]

Even better :

<DialogContent @openAutoFocus.prevent>

[ystrdy]

Here's my solution:

Define the following usePreventAutoFocus hook:

// @/hooks/use-prevent-auto-focus.ts
import { useRef, useCallback } from 'react';

function usePreventAutoFocus<E extends HTMLElement = HTMLDivElement>() {
  const ref = useRef<E>(null);

  const onOpenAutoFocus = useCallback((event: Event) => {
    event.preventDefault();
    ref.current?.focus({ preventScroll: true });
  }, []);

  return { ref, onOpenAutoFocus, tabIndex: -1 as const };
}

export default usePreventAutoFocus;

And here's how to use it in a dialog:

import usePreventAutoFocus from '@/hooks/use-prevent-auto-focus'

const prevent = usePreventAutoFocus();

return (
  <Dialog open={open} onOpenChange={handleOpenChange}>
    <DialogContent {...prevent} className="outline-none">
      <DialogHeader>
        <DialogTitle>Share Folder</DialogTitle>
        <DialogDescription>
          Select the folder to share and the members to share it with.
        </DialogDescription>
      </DialogHeader>

      <div>
        <Label className="text-base font-semibold block mb-2">Select Folder</Label>
        <InputSearch
          placeholder="Search folders..."
          value={folderSearchTerm}
          onChange={(e) => setFolderSearchTerm(e.target.value)}
          className="my-2 h-9"
          disabled={sharing}
        />
      </div>
    </DialogContent>
  </Dialog>
);

[auzanxp]

thank you for solution bro, it's work

[kevincrossgrove]

Thank you, works perfectly <3

[aBenve]

I founded a solution for me at least, just add tabIndex={undefined} to the <DialogContent /> (or the inner <DialogPrimitive.Content />) and you are good to go!

[mattanimation]

Thanks! This fixed it for me where I had a form inside a Content element it wouldn't allow me to tab to other inputs. none of the autofocus, onOpen or onClose worked.