Library

Web Components (@fluentui/web-components)

System Info

@fluentui/web-components
3.0.0-beta.38

Are you reporting Accessibility issue?

None

Reproduction

https://stackblitz.com/edit/typescript-ygoi4r?file=package.json,index.ts

Bug Description

Actual Behavior

Check out the reproduction: https://stackblitz.com/edit/typescript-ygoi4r?file=package.json,index.ts

We have a slot named 'end' for the fluent-text-input element, the slotted element is a button.

1. focus on the text-input first
2. Press the tab button

The focus should move on to the button

Expected Behavior

The focus still on the input element, and the button can not be focused

I have figured out the root cause, it is caused by this commit: afa7744#diff-740e3ccdf42d58e6f67fdf5cdf2d5b18cf28cb160e20990a25eb7860b90cb84cR12, which introduces a focusin event handler to the text-input internal input element, which causes the focus can't be moved to slotted focusable elements.

The workaround is to add a focusin event handler for the slotted focusable element and stop propagation, for example: https://stackblitz.com/edit/typescript-b6xntf?file=package.json,index.ts, this approach works fine, but obviously, the commit I posted above has introduced a breaking change, and I don't think it is a good design

Logs

No response

Requested priority

Blocking

Products/sites affected

No response

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.