Description
When a field is rendered from React with the autofocus prop, it does not receive focus on initial render. Focus stays on <body>.
The prop is set on the element (element.autofocus === true afterwards), but it has no effect. DelegateFocusMixin reads autofocus only once, in ready(). That runs when the element is connected. The React wrapper (@lit/react createComponent) assigns element properties in a useLayoutEffect, after React has inserted the element into the DOM. So ready() has already run with autofocus === false.
Expected outcome
<TextField autofocus /> focuses the field's input on initial render, the same as in plain HTML, where autofocus is set before the element is connected.
Minimal reproducible example
import { TextField } from '@vaadin/react-components/TextField.js';
export default function View() {
return <TextField label="Email" autofocus />;
}Open the view, then check document.activeElement → BODY.
Without React, the result depends on when autofocus is set:
const a = document.createElement('vaadin-text-field');
a.autofocus = true; // set BEFORE connecting
document.body.append(a); // → gets focus ✅
const b = document.createElement('vaadin-text-field');
document.body.append(b);
b.autofocus = true; // set AFTER connecting (what the React wrapper does)
// → no focus ❌Workaround
Call focus() from a ref after mount, deferred by one animation frame:
const ref = useRef<TextFieldElement>(null);
useEffect(() => {
const f = requestAnimationFrame(() => ref.current?.focus());
return () => cancelAnimationFrame(f);
}, []);Possible fixes
DelegateFocusMixin: also react to autofocus changing to true before the element has been focused or interacted with (e.g. an observer, or reading it in firstUpdated), or@vaadin/react-components: apply autofocus before the element is connected (like createComponentWithOrderedProps does for other order-sensitive props).
Environment
- Vaadin 25.0.9 (
@vaadin/react-components 25.0.9, @vaadin/text-field 25.0.9, @vaadin/a11y-base 25.0.9)
@lit/react 1.0.8, React 19.2.4- Hilla file router, Spring Boot 4.0.6, Java 25
Browsers
Chrome 153 (Windows 11). Also reproduced in headless Chrome.
Description
When a field is rendered from React with the
autofocusprop, it does not receive focus on initial render. Focus stays on<body>.The prop is set on the element (
element.autofocus === trueafterwards), but it has no effect.DelegateFocusMixinreadsautofocusonly once, inready(). That runs when the element is connected. The React wrapper (@lit/reactcreateComponent) assigns element properties in auseLayoutEffect, after React has inserted the element into the DOM. Soready()has already run withautofocus === false.Expected outcome
<TextField autofocus />focuses the field's input on initial render, the same as in plain HTML, whereautofocusis set before the element is connected.Minimal reproducible example
Open the view, then check
document.activeElement→BODY.Without React, the result depends on when
autofocusis set:Workaround
Call
focus()from a ref after mount, deferred by one animation frame:Possible fixes
DelegateFocusMixin: also react toautofocuschanging totruebefore the element has been focused or interacted with (e.g. an observer, or reading it infirstUpdated), or@vaadin/react-components: applyautofocusbefore the element is connected (likecreateComponentWithOrderedPropsdoes for other order-sensitive props).Environment
@vaadin/react-components25.0.9,@vaadin/text-field25.0.9,@vaadin/a11y-base25.0.9)@lit/react1.0.8, React 19.2.4Browsers
Chrome 153 (Windows 11). Also reproduced in headless Chrome.