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]

[soham2k06]

I tried this and it works, but when I tab through elements, the tab is not trapped inside of a dialog at first and goes through background elements and only then comes to the dialog and is trapped there. Is there a fix for that?

Same problem but with form inputs, it focuses to the dialog in between

[LikeDreamwalker]

Well it is not working in my scenario, I can see the logs in onOpenAutoFocus event, but seems like it is not stopped, or some other part triggers the focus.

[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

[Rezahy]

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

[azizdevuz]

Vue.

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

[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