Prevent focus on dialog

[kerimcet]

I'm trying to prevent focus of first input inside dialog. I've look the docs but couldn't see 😶‍🌫️

Is there any option to fix it?

[benoitgrelard]

Hi @kerimcet, typically you wouldn't want to completely prevent focus inside the dialog otherwise you'll be breaking accessibility. However, if what you want is prevent the default autofocus and focus something else inside the Dialog instead, there most defeinitley is a way to do this. You can simple do event.preventDefault() in Content's onOpenAutoFocus prop and then run your own focus logic in there.

[kerimcet]

Thanks for the explanation 😊

[Sumonche016]

thanks man it works

[anthony-urbina]

thanks. this worked for me, had to use ts-ignore to get around type error though - using v2.1.2. Just a heads up for anyone that encounters the same.

[jiwoniverse]

In my case, onOpenAutoFocus={(e) => e.preventDefault()} did not work, but adding autoFocus={false} resolved the issue. However, using autoFocus={false} can degrade accessibility for users, so it should be used with caution.

[hexcowboy]

I found a solution I like better, which is making the title focusable with tabIndex={0} and autoFocus, then hiding the outline when the title is focused:

const ModalTitle = ({
  className,
  ...props
}: React.ComponentProps<typeof Dialog.Title>) => (
  <Dialog.Title
    autoFocus
    tabIndex={0}
    className={twMerge(
      "focus:outline-none",
      className,
    )}
    {...props}
  />
);

[netrolite]

In my case I actually had to use the opposite - onCloseAutoFocus

[ellisfan]

const Toolbar = () => (
    <div className="relative">
        <input type="text" value={searchkeyword} />
    </div>
)

When using Toolbar within DialogContent, neither autoFocus={false} nor onCloseAutoFocus={(event) => event.preventDefault()} works as intended.
The behavior is that the entire Dialog gains focus, displaying a blue outline on the outer layer.

[ellisfan]

ok, i must use autoFocus at input

[magical-chris]

In my case I just wanted to prevent a particular element from being auto-focused without preventing it from being manually focusable.

react-focus-trap explicitly excludes anchor elements from auto-focus, so as a hack I rendered my button as:

<a role="button" tabIndex="0" onClick={handleClick} >

Potentially unstable fix, but works for now. Really wish react-focus-trap allowed opting certain elements out of autofocus via a data attribute or similar.