[Bug]: fluent-text-input delegatesFocus breaks caret visibility and text selection in Chromium WebUI

[chaangliu]

Component

TextInput

Package version

3.0.0-rc.9

@microsoft/fast-element version

2.10.2

Environment

macOS 15 (Sequoia), Chromium-based browser (Microsoft Edge), ARM64 (It is an all-platform issue including Windows)

Current Behavior

The <fluent-text-input> component uses delegatesFocus: true in its shadow root options (text-input.definition.ts#L17-18):

shadowOptions: {
    delegatesFocus: true,
},

On Chromium WebUI, fluent-text-input has a few bugs:

1. Caret visibility -- Clicking the input shows no text cursor/caret
2. Drag-to-select -- Cannot click and drag to select text within the input
3. Click-to-place-cursor -- Cannot click at a specific position within existing text to move the cursor there

This issue is particularly impactful when fluent-text-input is used inside Chromium WebUI popups (e.g., Edge browser chrome UI), but it also affects any macOS Chromium-based environment where focus delegation interacts with the platform's native focus handling.

Expected Behavior

The <fluent-text-input> should display a visible caret, support drag-to-select, and allow click-to-place-cursor on all platforms including macOS.

Reproduction

This can be reproduced in any Chromium-based environment on macOS:

1. Create a page with <fluent-text-input> inside a Shadow DOM host
2. Open it in Chrome/Edge on macOS
3. Click inside the text input
4. Observe: caret may not be visible, and dragging to select text does not work

The Fluent UI Storybook at https://storybooks.fluentui.dev/web-components/?path=/docs/components-textinput--docs partially shows this issue on macOS -- the caret appears but drag-to-select may not work depending on the hosting context.

Reproduction

https://stackblitz.com/ is broken

Steps to reproduce

Steps to reproduce

1. Open a page using <fluent-text-input> in Chrome or Edge on macOS
2. Click inside the text input to focus it
3. Try to see the caret -- it may not be visible (in the workspaces Edit Workspace text input)
4. Try to click and drag to select text -- selection does not work (for all the , such as in the tab search, favorites feature)
5. The same input works correctly on Windows/Linux

Are you reporting an Accessibility issue?

no

Suggested severity

High - No workaround

Products/sites affected

Microsoft Edge browser chrome UI (WebUI bubbles/popups using fluent-text-input), and potentially any Chromium-based application using fluent-text-input on macOS.

Are you willing to submit a PR to fix?

yes

---

Possible solution

The <fluent-text-input> component already has manual focus forwarding logic in text-input.base.ts:

• focusinHandler() (line 472): forwards focus from host to this.control
• clickHandler() (line 451): forwards click from host to this.control

Proposal: Remove delegatesFocus: true from the shadowOptions in text-input.definition.ts, and add a @click binding to the template to ensure the existing clickHandler is wired up:

The same fix should be applied to <fluent-textarea> and <fluent-field> which also use delegatesFocus: true.

Are you reporting an Accessibility issue?

None

Suggested severity

High - No workaround

Products/sites affected

Edge

Are you willing to submit a PR to fix?

yes

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.