[Bug]: datalist support to fluent-text-input across the shadow DOM boundary

Component

TextInput

Package version

3.1.0

@microsoft/fast-element version

3.0.2

Environment

System:
    OS: Windows 11 10.0.26200
    CPU: (16) x64 AMD EPYC 7763 64-Core Processor
    Memory: 33.79 GB / 63.95 GB
  Browsers:
    Edge: Chromium (151.0.4129.86), ChromiumDev (153.0.4210.0)
    Firefox: 153.0.4 - C:\Program Files\Mozilla Firefox\firefox.exe

Current Behavior

The fluent-text-input component exposes a list attribute that is forwarded to its internal native <input>:

<fluent-text-input list="suggestions" type="text"></fluent-text-input>

<datalist id="suggestions">
  <option value="Example 1"></option>
  <option value="Example 2"></option>
</datalist>

However, the native <input> is rendered inside the component's shadow root, while the <datalist> is in the document tree.

According to the HTML specification, the element referenced by an input's list attribute must be in the same DOM tree as the input. Consequently, the internal input cannot resolve the external datalist and no suggestions are displayed.

Nesting the datalist inside the component does not solve the problem:

<fluent-text-input list="suggestions" type="text">
  <datalist id="suggestions">
    <option value="Example 1"></option>
    <option value="Example 2"></option>
  </datalist>
</fluent-text-input>

The nested datalist remains in the component's light DOM. Even when projected through a slot, slotted elements retain their original DOM root, so they are still not in the same tree as the internal input.

As a result, the component currently exposes a list attribute that cannot be used declaratively with a standard <datalist>.

Expected Behavior

The data list must be displayed.

Proposed Solution

Add a named datalist slot that serves as the declarative source for suggestions:

<fluent-text-input list="suggestions" type="text">
  <datalist slot="datalist" id="suggestions">
    <option value="Example 1"></option>
    <option value="Example 2"></option>
  </datalist>
</fluent-text-input>

Reproduction

https://stackblitz.com/edit/typescript-8zzexetu?file=index.html

Steps to reproduce

Run this sample code. Not data list is displayed.

<fluent-text-input list="suggestions" type="text">
  <datalist id="suggestions">
    <option value="Example 1"></option>
    <option value="Example 2"></option>
  </datalist>
</fluent-text-input>

Are you reporting an Accessibility issue?

no

Suggested severity

High - No workaround

Products/sites affected

https://github.com/microsoft/fluentui-blazor/issues/5114

Are you willing to submit a PR to fix?

no

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.