How to set autofocus to input?

[tpinne]

Does anybody know how to set autofocus on an TextInput field?

I tried autoFocus={true} but this does not get passed through to the actual input. According to TS types it supports all props from HTMLInputElement but the useInputProps hook seems to only pass a specific selection of props through:

mantine/src/mantine-core/src/Input/use-input-props.ts

Lines 73 to 82 in 322538d

	inputProps: {
	required,
	classNames,
	styles,
	unstyled,
	id: uid,
	size,
	__staticSelector,
	invalid: !!error,
	},

The I tried to use a ref according to https://mantine.dev/core/text-input/#get-input-ref, but the current value only gets a reference to the input element after I clicked in it, which is strange.

const inputRef = useRef<HTMLInputElement>(null);
  useEffect(() => {
    inputRef.current?.focus();
  }, [inputRef.current]);

return <TextInput ref={inputRef} />;

[rtivital]

Set autoFocus attribute if input is rendered on the page, set data-autofocus if input is rendered within modal or other component that uses focus trap.

[tpinne]

It is within a modal and inside that modal in a tab. But with data-autofocus or data-autofocus={true} it is still not working. I also tried keepMounted={false} on the tabs component. Is this anywhere documented? Didn't stumble upon it during my search for a solution in the docs.

I'm using 5.4.0 by the way.

[rtivital]

• https://codesandbox.io/s/hardcore-mcnulty-ys3x1d?file=/src/App.tsx
• https://mantine.dev/core/modal/#initial-focus

[tpinne]

Ok, didn't see that. But then it is the combination of Tabs inside Modal which doesn't work with autofocus. Using autoFocus inside Tab-Panel outside a modal works. Using either data-autofocus does not work inside a Tab inside a Modal. Combining both options for the input doesn't work also.

https://codesandbox.io/s/objective-lehmann-29210h?file=/src/App.tsx

[rtivital]

Then get input ref and call inputRef.current.focus()

[tpinne]

As mentioned in my first post this was my initial approach, after autoFocus didn't work in my case (because inside modal...). I tried every possible way in that sandbox to get a ref to that input, but I'm not able to. I tried with useEffect, without it, logged inputRef.current always null it only gets a value after changing something and the hot reload kicks in.