From d9260799c8c68e9adb8c2dbf974a1d40a908c472 Mon Sep 17 00:00:00 2001
From: Zacky Ma <machi@microsoft.com>
Date: Tue, 9 Jun 2026 13:49:45 -0700
Subject: [PATCH 1/8] fix autofocus for text input

---
 .../web-components/docs/web-components.api.md |  2 -
 .../src/text-input/text-input.base.ts         | 38 ++-----------------
 .../src/text-input/text-input.template.ts     |  6 +--
 .../web-components/src/utils/autofocus.ts     | 13 +++++++
 4 files changed, 17 insertions(+), 42 deletions(-)
 create mode 100644 packages/web-components/src/utils/autofocus.ts

diff --git a/packages/web-components/docs/web-components.api.md b/packages/web-components/docs/web-components.api.md
index ae1de40ebd7f8..b1f813bf5676e 100644
--- a/packages/web-components/docs/web-components.api.md
+++ b/packages/web-components/docs/web-components.api.md
@@ -1011,7 +1011,6 @@ export class BaseTextArea extends FASTElement {
 // @public
 export class BaseTextInput extends FASTElement {
     autocomplete?: string;
-    autofocus: boolean;
     // @internal
     changeHandler(e: InputEvent): boolean | void;
     checkValidity(): boolean;
@@ -1035,7 +1034,6 @@ export class BaseTextInput extends FASTElement {
     disabled?: boolean;
     // @internal
     elementInternals: ElementInternals;
-    focusinHandler(e: FocusEvent): boolean | void;
     get form(): HTMLFormElement | null;
     static readonly formAssociated = true;
     formAttribute?: string;
diff --git a/packages/web-components/src/text-input/text-input.base.ts b/packages/web-components/src/text-input/text-input.base.ts
index dfcb652490ca9..9040df0566252 100644
--- a/packages/web-components/src/text-input/text-input.base.ts
+++ b/packages/web-components/src/text-input/text-input.base.ts
@@ -1,12 +1,5 @@
-import {
-  attr,
-  FASTElement,
-  nullableNumberConverter,
-  Observable,
-  observable,
-  type Subscriber,
-  Updates,
-} from '@microsoft/fast-element';
+import { attr, FASTElement, nullableNumberConverter, Observable, observable, Updates } from '@microsoft/fast-element';
+import { setAutoFocus } from '../utils/autofocus.js';
 import { ImplicitSubmissionBlockingTypes, TextInputType } from './text-input.options.js';
 
 /**
@@ -33,17 +26,6 @@ export class BaseTextInput extends FASTElement {
   @attr
   public autocomplete?: string;
 
-  /**
-   * Indicates that the element should get focus after the page finishes loading.
-   * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Element/input#autofocus | `autofocus`} attribute
-   *
-   * @public
-   * @remarks
-   * HTML Attribute: `autofocus`
-   */
-  @attr({ mode: 'boolean' })
-  public autofocus!: boolean;
-
   /**
    * The current value of the input.
    * @public
@@ -463,24 +445,10 @@ export class BaseTextInput extends FASTElement {
   public connectedCallback(): void {
     super.connectedCallback();
 
-    this.tabIndex = Number(this.getAttribute('tabindex') ?? 0) < 0 ? -1 : 0;
-
     this.setFormValue(this.value);
     this.setValidity();
-  }
 
-  /**
-   * Focuses the inner control when the component is focused.
-   *
-   * @param e - the event object
-   * @public
-   */
-  public focusinHandler(e: FocusEvent): boolean | void {
-    if (e.target === this) {
-      this.control?.focus();
-    }
-
-    return true;
+    setAutoFocus(this);
   }
 
   /**
diff --git a/packages/web-components/src/text-input/text-input.template.ts b/packages/web-components/src/text-input/text-input.template.ts
index 5a2e701d24893..be19023a99857 100644
--- a/packages/web-components/src/text-input/text-input.template.ts
+++ b/packages/web-components/src/text-input/text-input.template.ts
@@ -10,10 +10,7 @@ import type { TextInputOptions } from './text-input.options.js';
  */
 export function textInputTemplate<T extends TextInput>(options: TextInputOptions = {}): ElementViewTemplate<T> {
   return html<T>`
-    <template
-      @focusin="${(x, c) => x.focusinHandler(c.event as FocusEvent)}"
-      @keydown="${(x, c) => x.keydownHandler(c.event as KeyboardEvent)}"
-    >
+    <template @keydown="${(x, c) => x.keydownHandler(c.event as KeyboardEvent)}">
       <label part="label" for="control" class="label" ${ref('controlLabel')}>
         <slot ${slotted('defaultSlottedNodes')}></slot>
       </label>
@@ -25,7 +22,6 @@ export function textInputTemplate<T extends TextInput>(options: TextInputOptions
           id="control"
           @change="${(x, c) => x.changeHandler(c.event as InputEvent)}"
           @input="${(x, c) => x.inputHandler(c.event as InputEvent)}"
-          ?autofocus="${x => x.autofocus}"
           autocomplete="${x => x.autocomplete}"
           ?disabled="${x => x.disabled}"
           list="${x => x.list}"
diff --git a/packages/web-components/src/utils/autofocus.ts b/packages/web-components/src/utils/autofocus.ts
new file mode 100644
index 0000000000000..6b48db6fb1ac4
--- /dev/null
+++ b/packages/web-components/src/utils/autofocus.ts
@@ -0,0 +1,13 @@
+/**
+ * This
+ */
+export function setAutoFocus(element: HTMLElement) {
+  const doc = element.ownerDocument;
+  if (
+    element.isConnected &&
+    element?.hasAttribute('autofocus') &&
+    [null, element, doc.body, doc.documentElement].includes(doc.activeElement as HTMLElement | null)
+  ) {
+    element.focus();
+  }
+}

From c63a4b65ef83952fc583fe0bd16ca639ed7733ff Mon Sep 17 00:00:00 2001
From: Zacky Ma <machi@microsoft.com>
Date: Tue, 9 Jun 2026 13:50:36 -0700
Subject: [PATCH 2/8] change file

---
 ...eb-components-8407ff54-9881-408f-86cd-9bf5bb6f5e83.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@fluentui-web-components-8407ff54-9881-408f-86cd-9bf5bb6f5e83.json

diff --git a/change/@fluentui-web-components-8407ff54-9881-408f-86cd-9bf5bb6f5e83.json b/change/@fluentui-web-components-8407ff54-9881-408f-86cd-9bf5bb6f5e83.json
new file mode 100644
index 0000000000000..674263926ab03
--- /dev/null
+++ b/change/@fluentui-web-components-8407ff54-9881-408f-86cd-9bf5bb6f5e83.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: autofocus in text-input",
+  "packageName": "@fluentui/web-components",
+  "email": "machi@microsoft.com",
+  "dependentChangeType": "patch"
+}

From a26abd9f9c052572b84f65bdcb36a719716fc323 Mon Sep 17 00:00:00 2001
From: Zacky Ma <machi@microsoft.com>
Date: Tue, 9 Jun 2026 15:00:11 -0700
Subject: [PATCH 3/8] check element visibility

---
 packages/web-components/src/utils/autofocus.ts | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/web-components/src/utils/autofocus.ts b/packages/web-components/src/utils/autofocus.ts
index 6b48db6fb1ac4..a73176bb84617 100644
--- a/packages/web-components/src/utils/autofocus.ts
+++ b/packages/web-components/src/utils/autofocus.ts
@@ -1,11 +1,21 @@
 /**
- * This
+ * Artificial sets the focus to the given element, if no other element in the
+ * document is currently focused and the given element meets the following
+ * conditions:
+ *
+ * - is connected to DOM
+ * - has `autofocus` attribute
+ * - is visible
+ *
+ * For more details of this issue, see https://codepen.io/editor/marchbox/pen/019e9ab9-cd81-7c21-a3ae-1b7fe2d3458a
  */
 export function setAutoFocus(element: HTMLElement) {
   const doc = element.ownerDocument;
   if (
-    element.isConnected &&
+    element?.isConnected &&
     element?.hasAttribute('autofocus') &&
+    // Note: opacity=0 is considered visible based on the native `autofocus` implementation
+    element?.checkVisibility?.({ contentVisibilityAuto: true, visibilityProperty: true }) &&
     [null, element, doc.body, doc.documentElement].includes(doc.activeElement as HTMLElement | null)
   ) {
     element.focus();

From f77669590ddd0b5e3bc3bf59eeae9a9b06142ede Mon Sep 17 00:00:00 2001
From: Zacky Ma <machi@microsoft.com>
Date: Wed, 10 Jun 2026 14:40:10 -0700
Subject: [PATCH 4/8] fix autofocus for all focusable components

---
 packages/web-components/docs/web-components.api.md  |  1 -
 packages/web-components/src/button/button.base.ts   | 13 ++-----------
 .../web-components/src/checkbox/checkbox.base.ts    | 13 ++-----------
 .../web-components/src/combobox/combobox.stories.ts |  7 +++++--
 .../web-components/src/dropdown/dropdown.base.ts    |  5 ++++-
 packages/web-components/src/menu-item/menu-item.ts  |  3 +++
 packages/web-components/src/slider/slider.ts        |  3 +++
 packages/web-components/src/tab/tab.ts              |  3 +++
 .../src/text-input/text-input.base.ts               |  4 ++--
 .../web-components/src/textarea/textarea.base.ts    |  2 ++
 .../web-components/src/tree-item/tree-item.base.ts  |  3 +++
 packages/web-components/src/utils/autofocus.ts      | 13 +++++++++++--
 12 files changed, 40 insertions(+), 30 deletions(-)

diff --git a/packages/web-components/docs/web-components.api.md b/packages/web-components/docs/web-components.api.md
index b1f813bf5676e..8301b38824009 100644
--- a/packages/web-components/docs/web-components.api.md
+++ b/packages/web-components/docs/web-components.api.md
@@ -493,7 +493,6 @@ export class BaseAvatar extends FASTElement {
 // @public
 export class BaseButton extends FASTElement {
     constructor();
-    autofocus: boolean;
     // @internal
     clickHandler(e: Event): boolean | void;
     // (undocumented)
diff --git a/packages/web-components/src/button/button.base.ts b/packages/web-components/src/button/button.base.ts
index 510c6ba31ec3f..891e46f5b59c3 100644
--- a/packages/web-components/src/button/button.base.ts
+++ b/packages/web-components/src/button/button.base.ts
@@ -1,4 +1,5 @@
 import { attr, FASTElement, observable } from '@microsoft/fast-element';
+import { maybeSetAutoFocus } from '../utils/autofocus.js';
 import { type ButtonFormTarget, ButtonType } from './button.options.js';
 
 /**
@@ -13,17 +14,6 @@ import { type ButtonFormTarget, ButtonType } from './button.options.js';
  * @public
  */
 export class BaseButton extends FASTElement {
-  /**
-   * Indicates the button should be focused when the page is loaded.
-   * @see The {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#autofocus | `autofocus`} attribute
-   *
-   * @public
-   * @remarks
-   * HTML Attribute: `autofocus`
-   */
-  @attr({ mode: 'boolean' })
-  public autofocus!: boolean;
-
   /**
    * Default slotted content.
    *
@@ -259,6 +249,7 @@ export class BaseButton extends FASTElement {
     super.connectedCallback();
     this.elementInternals.ariaDisabled = `${!!this.disabledFocusable}`;
     this.setTabIndex();
+    maybeSetAutoFocus(this);
   }
 
   constructor() {
diff --git a/packages/web-components/src/checkbox/checkbox.base.ts b/packages/web-components/src/checkbox/checkbox.base.ts
index b378112216ff9..7b1adb87913d4 100644
--- a/packages/web-components/src/checkbox/checkbox.base.ts
+++ b/packages/web-components/src/checkbox/checkbox.base.ts
@@ -1,5 +1,6 @@
 import { attr, FASTElement, Observable, observable } from '@microsoft/fast-element';
 import { toggleState } from '../utils/element-internals.js';
+import { maybeSetAutoFocus } from '../utils/autofocus.js';
 
 /**
  * The base class for a component with a toggleable checked state.
@@ -7,17 +8,6 @@ import { toggleState } from '../utils/element-internals.js';
  * @public
  */
 export class BaseCheckbox extends FASTElement {
-  /**
-   * Indicates that the element should get focus after the page finishes loading.
-   * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Element/input#autofocus | `autofocus`} attribute
-   *
-   * @public
-   * @remarks
-   * HTML Attribute: `autofocus`
-   */
-  @attr({ mode: 'boolean' })
-  public autofocus!: boolean;
-
   /**
    * The element's current checked state.
    *
@@ -356,6 +346,7 @@ export class BaseCheckbox extends FASTElement {
     this.disabled = !!this.disabledAttribute;
     this.setAriaChecked();
     this.setValidity();
+    maybeSetAutoFocus(this);
   }
 
   /**
diff --git a/packages/web-components/src/combobox/combobox.stories.ts b/packages/web-components/src/combobox/combobox.stories.ts
index a079f4c1e158f..24f7e4a4a95dd 100644
--- a/packages/web-components/src/combobox/combobox.stories.ts
+++ b/packages/web-components/src/combobox/combobox.stories.ts
@@ -43,8 +43,11 @@ export default {
   parameters: {
     docs: {
       description: {
-        component: `The Combobox component is a variant of the <a href="/docs/components-dropdown--docs">Dropdown</a> component.
-        To use a combobox, use <code>&lt;fluent-dropdown type="combobox"&gt;</code>.`,
+        component: `
+The Combobox component is a variant of the <a href="/docs/components-dropdown--docs">Dropdown</a> component.
+
+To use a combobox, use <code>&lt;fluent-dropdown type="combobox"&gt;</code>.
+        `,
       },
     },
   },
diff --git a/packages/web-components/src/dropdown/dropdown.base.ts b/packages/web-components/src/dropdown/dropdown.base.ts
index 1b4a5b905d2e4..1e06739f92f70 100644
--- a/packages/web-components/src/dropdown/dropdown.base.ts
+++ b/packages/web-components/src/dropdown/dropdown.base.ts
@@ -9,6 +9,7 @@ import { getLanguage } from '../utils/language.js';
 import { waitForConnectedDescendants } from '../utils/request-idle-callback.js';
 import { AnchorPositioningCSSSupported } from '../utils/support.js';
 import { uniqueId } from '../utils/unique-id.js';
+import { maybeSetAutoFocus } from '../utils/autofocus.js';
 import { DropdownType } from './dropdown.options.js';
 import { dropdownButtonTemplate, dropdownInputTemplate } from './dropdown.template.js';
 
@@ -856,7 +857,7 @@ export class BaseDropdown extends FASTElement {
   private searchTimeout?: ReturnType<typeof setTimeout>;
 
   /**
-   * Handles printable character input by moving {@link activeIndex} to the next option whose label matches the
+   * Handles printable character input by moving {@link Dropdown#activeIndex} to the next option whose label matches the
    * accumulated search string. When the string is a single character (or the same character repeated), matching
    * options are cycled through; otherwise the string is treated as a prefix match.
    *
@@ -1105,6 +1106,8 @@ export class BaseDropdown extends FASTElement {
     Updates.enqueue(() => {
       this.insertControl();
     });
+
+    maybeSetAutoFocus(this);
   }
 
   disconnectedCallback(): void {
diff --git a/packages/web-components/src/menu-item/menu-item.ts b/packages/web-components/src/menu-item/menu-item.ts
index 533f1cfaee9cd..c806159a53800 100644
--- a/packages/web-components/src/menu-item/menu-item.ts
+++ b/packages/web-components/src/menu-item/menu-item.ts
@@ -4,6 +4,7 @@ import { StartEnd } from '../patterns/start-end.js';
 import { applyMixins } from '../utils/apply-mixins.js';
 import { toggleState } from '../utils/element-internals.js';
 import type { StaticallyComposableHTML } from '../utils/template-helpers.js';
+import { maybeSetAutoFocus } from '../utils/autofocus.js';
 import { MenuItemRole, roleForMenuItem } from './menu-item.options.js';
 
 export type MenuItemColumnCount = 0 | 1 | 2;
@@ -160,6 +161,8 @@ export class MenuItem extends FASTElement {
 
     this.elementInternals.role = this.role ?? MenuItemRole.menuitem;
     this.elementInternals.ariaChecked = this.role !== MenuItemRole.menuitem ? `${!!this.checked}` : null;
+
+    maybeSetAutoFocus(this);
   }
 
   /**
diff --git a/packages/web-components/src/slider/slider.ts b/packages/web-components/src/slider/slider.ts
index 4fe92baff364b..49970a2dae144 100644
--- a/packages/web-components/src/slider/slider.ts
+++ b/packages/web-components/src/slider/slider.ts
@@ -5,6 +5,7 @@ import { limit } from '../utils/numbers.js';
 import { Orientation } from '../utils/orientation.js';
 import { numberLikeStringConverter } from '../utils/converters.js';
 import { getDirection } from '../utils/direction.js';
+import { maybeSetAutoFocus } from '../utils/autofocus.js';
 import { convertPixelToPercent } from './slider-utilities.js';
 import { type SliderConfiguration, SliderMode, SliderOrientation, SliderSize } from './slider.options.js';
 
@@ -552,6 +553,8 @@ export class Slider extends FASTElement implements SliderConfiguration {
       notifier.subscribe(this, 'min');
       notifier.subscribe(this, 'step');
     });
+
+    maybeSetAutoFocus(this);
   }
 
   /**
diff --git a/packages/web-components/src/tab/tab.ts b/packages/web-components/src/tab/tab.ts
index 42929cc963bae..25cf4683b7f90 100644
--- a/packages/web-components/src/tab/tab.ts
+++ b/packages/web-components/src/tab/tab.ts
@@ -2,6 +2,7 @@ import { attr, css, type ElementStyles, FASTElement } from '@microsoft/fast-elem
 import type { StartEndOptions } from '../patterns/start-end.js';
 import { StartEnd } from '../patterns/start-end.js';
 import { applyMixins } from '../utils/apply-mixins.js';
+import { maybeSetAutoFocus } from '../utils/autofocus.js';
 
 /**
  * Tab configuration options
@@ -65,6 +66,8 @@ export class Tab extends FASTElement {
     `;
 
     this.$fastController.addStyles(this.styles);
+
+    maybeSetAutoFocus(this);
   }
 
   private setDisabledSideEffect(disabled: boolean) {
diff --git a/packages/web-components/src/text-input/text-input.base.ts b/packages/web-components/src/text-input/text-input.base.ts
index 9040df0566252..94930ea0ed66a 100644
--- a/packages/web-components/src/text-input/text-input.base.ts
+++ b/packages/web-components/src/text-input/text-input.base.ts
@@ -1,5 +1,5 @@
 import { attr, FASTElement, nullableNumberConverter, Observable, observable, Updates } from '@microsoft/fast-element';
-import { setAutoFocus } from '../utils/autofocus.js';
+import { maybeSetAutoFocus } from '../utils/autofocus.js';
 import { ImplicitSubmissionBlockingTypes, TextInputType } from './text-input.options.js';
 
 /**
@@ -448,7 +448,7 @@ export class BaseTextInput extends FASTElement {
     this.setFormValue(this.value);
     this.setValidity();
 
-    setAutoFocus(this);
+    maybeSetAutoFocus(this);
   }
 
   /**
diff --git a/packages/web-components/src/textarea/textarea.base.ts b/packages/web-components/src/textarea/textarea.base.ts
index 38038ab64f6da..45fec1333b65c 100644
--- a/packages/web-components/src/textarea/textarea.base.ts
+++ b/packages/web-components/src/textarea/textarea.base.ts
@@ -2,6 +2,7 @@ import { attr, FASTElement, nullableNumberConverter, observable, Updates } from
 import { whitespaceFilter } from '../utils/whitespace-filter.js';
 import type { Label } from '../label/label.js';
 import { hasMatchingState, swapStates, toggleState } from '../utils/element-internals.js';
+import { maybeSetAutoFocus } from '../utils/autofocus.js';
 import { TextAreaAutocomplete, TextAreaResize } from './textarea.options.js';
 
 /**
@@ -443,6 +444,7 @@ export class BaseTextArea extends FASTElement {
       this.preConnectControlEl = null;
 
       this.maybeCreateAutoSizerEl();
+      maybeSetAutoFocus(this);
     });
   }
 
diff --git a/packages/web-components/src/tree-item/tree-item.base.ts b/packages/web-components/src/tree-item/tree-item.base.ts
index 55562bc877881..799262f2df3b8 100644
--- a/packages/web-components/src/tree-item/tree-item.base.ts
+++ b/packages/web-components/src/tree-item/tree-item.base.ts
@@ -1,5 +1,6 @@
 import { attr, css, type ElementStyles, FASTElement, observable } from '@microsoft/fast-element';
 import { toggleState } from '../utils/element-internals.js';
+import { maybeSetAutoFocus } from '../utils/autofocus.js';
 import { isTreeItem } from './tree-item.options.js';
 
 export class BaseTreeItem extends FASTElement {
@@ -37,6 +38,8 @@ export class BaseTreeItem extends FASTElement {
     if (isTreeItem(this.parentElement)) {
       this.slot ||= 'item';
     }
+
+    maybeSetAutoFocus(this);
   }
 
   /**
diff --git a/packages/web-components/src/utils/autofocus.ts b/packages/web-components/src/utils/autofocus.ts
index a73176bb84617..0498e2f908329 100644
--- a/packages/web-components/src/utils/autofocus.ts
+++ b/packages/web-components/src/utils/autofocus.ts
@@ -1,3 +1,9 @@
+import { Updates } from '@microsoft/fast-element';
+
+interface FluentElement extends HTMLElement {
+  disabled?: boolean;
+}
+
 /**
  * Artificial sets the focus to the given element, if no other element in the
  * document is currently focused and the given element meets the following
@@ -9,15 +15,18 @@
  *
  * For more details of this issue, see https://codepen.io/editor/marchbox/pen/019e9ab9-cd81-7c21-a3ae-1b7fe2d3458a
  */
-export function setAutoFocus(element: HTMLElement) {
+export function maybeSetAutoFocus(element: FluentElement) {
   const doc = element.ownerDocument;
   if (
     element?.isConnected &&
     element?.hasAttribute('autofocus') &&
+    !element?.disabled &&
     // Note: opacity=0 is considered visible based on the native `autofocus` implementation
     element?.checkVisibility?.({ contentVisibilityAuto: true, visibilityProperty: true }) &&
     [null, element, doc.body, doc.documentElement].includes(doc.activeElement as HTMLElement | null)
   ) {
-    element.focus();
+    Updates.enqueue(() => {
+      element.focus();
+    });
   }
 }

From 00a9c39143573b011e169884cc3fe969f3feb1fa Mon Sep 17 00:00:00 2001
From: Zacky Ma <machi@microsoft.com>
Date: Wed, 10 Jun 2026 14:49:33 -0700
Subject: [PATCH 5/8] update api

---
 packages/web-components/docs/web-components.api.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/web-components/docs/web-components.api.md b/packages/web-components/docs/web-components.api.md
index 8301b38824009..048ed1ac9234b 100644
--- a/packages/web-components/docs/web-components.api.md
+++ b/packages/web-components/docs/web-components.api.md
@@ -531,7 +531,6 @@ export class BaseButton extends FASTElement {
 
 // @public
 export class BaseCheckbox extends FASTElement {
-    autofocus: boolean;
     get checked(): boolean;
     set checked(next: boolean);
     checkValidity(): boolean;

From b2039480a10ab913f67d00d044d11552f157e888 Mon Sep 17 00:00:00 2001
From: Zacky Ma <machi@microsoft.com>
Date: Wed, 10 Jun 2026 14:51:08 -0700
Subject: [PATCH 6/8] update change message

---
 ...tui-web-components-8407ff54-9881-408f-86cd-9bf5bb6f5e83.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/change/@fluentui-web-components-8407ff54-9881-408f-86cd-9bf5bb6f5e83.json b/change/@fluentui-web-components-8407ff54-9881-408f-86cd-9bf5bb6f5e83.json
index 674263926ab03..dd3587187eea3 100644
--- a/change/@fluentui-web-components-8407ff54-9881-408f-86cd-9bf5bb6f5e83.json
+++ b/change/@fluentui-web-components-8407ff54-9881-408f-86cd-9bf5bb6f5e83.json
@@ -1,6 +1,6 @@
 {
   "type": "prerelease",
-  "comment": "fix: autofocus in text-input",
+  "comment": "fix: make sure autofocus works on all focusable custom elements during initial page load",
   "packageName": "@fluentui/web-components",
   "email": "machi@microsoft.com",
   "dependentChangeType": "patch"

From 14ed04ac21f591f252b4503f6f2c8cc712f2f1a3 Mon Sep 17 00:00:00 2001
From: Zacky Ma <machi@microsoft.com>
Date: Wed, 10 Jun 2026 15:03:23 -0700
Subject: [PATCH 7/8] no need to check disability

---
 packages/web-components/src/utils/autofocus.ts | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/web-components/src/utils/autofocus.ts b/packages/web-components/src/utils/autofocus.ts
index 0498e2f908329..69ede1129ec48 100644
--- a/packages/web-components/src/utils/autofocus.ts
+++ b/packages/web-components/src/utils/autofocus.ts
@@ -1,9 +1,5 @@
 import { Updates } from '@microsoft/fast-element';
 
-interface FluentElement extends HTMLElement {
-  disabled?: boolean;
-}
-
 /**
  * Artificial sets the focus to the given element, if no other element in the
  * document is currently focused and the given element meets the following
@@ -15,12 +11,11 @@ interface FluentElement extends HTMLElement {
  *
  * For more details of this issue, see https://codepen.io/editor/marchbox/pen/019e9ab9-cd81-7c21-a3ae-1b7fe2d3458a
  */
-export function maybeSetAutoFocus(element: FluentElement) {
+export function maybeSetAutoFocus(element: HTMLElement) {
   const doc = element.ownerDocument;
   if (
     element?.isConnected &&
     element?.hasAttribute('autofocus') &&
-    !element?.disabled &&
     // Note: opacity=0 is considered visible based on the native `autofocus` implementation
     element?.checkVisibility?.({ contentVisibilityAuto: true, visibilityProperty: true }) &&
     [null, element, doc.body, doc.documentElement].includes(doc.activeElement as HTMLElement | null)

From b4ff8b598d71ae1ddfc78200a036b9656a789560 Mon Sep 17 00:00:00 2001
From: Zacky Ma <machi@microsoft.com>
Date: Wed, 10 Jun 2026 16:02:57 -0700
Subject: [PATCH 8/8] remove special tabindex treatment for ssr test

---
 packages/web-components/src/text-input/text-input.spec.ts | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/packages/web-components/src/text-input/text-input.spec.ts b/packages/web-components/src/text-input/text-input.spec.ts
index 43c131a9e03ff..190f4966a9465 100644
--- a/packages/web-components/src/text-input/text-input.spec.ts
+++ b/packages/web-components/src/text-input/text-input.spec.ts
@@ -29,12 +29,6 @@ test.describe('TextInput', () => {
 
     const attributes: InitialTemplateAttributes = { autofocus: true };
 
-    if (ssr) {
-      // the host element needs to be focusable for autofocus to work on the server,
-      // so we need to set tabindex="0"
-      attributes.tabindex = '0';
-    }
-
     await fastPage.setTemplate({ attributes });
 
     await expect(element).toBeFocused();