Skip to content

fix(web-components): make sure autofocus works on all focusable custom elements during initial page load#36296

Draft
marchbox wants to merge 11 commits into
microsoft:masterfrom
marchbox:users/machi/text-input-autofocus
Draft

fix(web-components): make sure autofocus works on all focusable custom elements during initial page load#36296
marchbox wants to merge 11 commits into
microsoft:masterfrom
marchbox:users/machi/text-input-autofocus

Conversation

@marchbox

@marchbox marchbox commented Jun 9, 2026

Copy link
Copy Markdown
Contributor

Previous Behavior

All focusable components don’t work reliably with autofocus on initial page load, due to the timing of when a element is defined and when the browser’s autofocus candidates flush process happens. See more details here: https://codepen.io/editor/marchbox/pen/019e9ab9-cd81-7c21-a3ae-1b7fe2d3458a

New Behavior

Adding a new artificial element.focus() call in connectedCallback(), so that the element gets focused if it has autofocus attribute and no other element is focused on the page.

Related Issue(s)

@github-actions

github-actions Bot commented Jun 9, 2026

Copy link
Copy Markdown

📊 Bundle size report

✅ No changes found

@github-actions

github-actions Bot commented Jun 9, 2026

Copy link
Copy Markdown

Pull request demo site: URL

@marchbox marchbox force-pushed the users/machi/text-input-autofocus branch from a640148 to a26abd9 Compare June 9, 2026 22:00
@marchbox marchbox changed the title fix(web-components): make sure autofocus works on TextInput fix(web-components): make sure autofocus works on all focusable custom elements Jun 10, 2026
@marchbox marchbox changed the title fix(web-components): make sure autofocus works on all focusable custom elements fix(web-components): make sure autofocus works on all focusable custom elements during initial page load Jun 10, 2026
@marchbox marchbox force-pushed the users/machi/text-input-autofocus branch from 19e8ddf to b203948 Compare June 10, 2026 21:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

Status: No status

Development

Successfully merging this pull request may close these issues.

[Bug]: autofocus does not work in <fluent-text-input>

1 participant