[dev-v5] fix: FluentTextInput does not provide suggestions from a supplied <datalist>

[juliansiebert]

🐛 Bug Report

FluentTextInput does not pick up the supplied <datalist> to provide native browser suggestions.

The DataList parameter references the <datalist> by its id, but the underlying <input> element is rendered inside the component's shadow DOM. As a result, the browser cannot resolve the referenced <datalist> in the light DOM.

💻 Repro or Code Sample

Using FluentTextInput, no suggestions are shown:

<FluentTextInput DataList="my-datalist" />
<datalist id="my-datalist">
    <option value="example1" />
    <option value="example2" />
    <option value="example3" />
</datalist>

Using the standard Blazor InputText component, it works as expected:

@{string test = "";}

<InputText list="my-datalist2" @bind-Value="test" />
<datalist id="my-datalist2">
    <option value="example4" />
    <option value="example5" />
    <option value="example6" />
</datalist>

The same also works with a native HTML <input>:

<input type="text" list="my-datalist3" />
<datalist id="my-datalist3">
    <option value="example7" />
    <option value="example8" />
    <option value="example9" />
</datalist>

🤔 Expected Behavior

The browser should display the suggestions from the supplied <datalist> while typing into the FluentTextInput, in the same way as it does for a standard HTML <input>.

😯 Current Behavior

No suggestions are displayed.

The datalist is rendered outside the component's shadow DOM, while the underlying native <input> is inside the shadow DOM. Consequently, the list reference cannot resolve the <datalist> element.

This behavior appears to affect Chromium-based browsers as well as Safari and Firefox.

💁 Possible Solution

Previous versions of Fluent UI Blazor contained JavaScript handling that added the <datalist> to the component's shadow DOM.

This appears to have been addressed in v3 in the following commit:

f8c8759

A similar approach was used in v4 for the FluentSearch component:

6792c29

It may therefore be possible to restore similar handling for FluentTextInput in v5.

🔦 Context

I am converting an existing application to v5. The application uses <datalist> to provide previously entered user data when the same form is filled in again.

This functionality works with the standard Blazor InputText component and native HTML inputs, but currently does not work with FluentTextInput.

🌍 Your Environment

• OS & Device: Windows PC, iPhone 15 Pro
• Browsers: Microsoft Edge, Google Chrome, Apple Safari, Mozilla Firefox
• .NET: 10.0.102
• Fluent UI Blazor: 5.0.0-rc.4-26180.1

[dvoituron]

I don't think that is a behavior that we want to implement in v5. The list content will use the browser design and not the FluentUI design.

You can use the FluentAutocomplete to propose items to the end user.

[dvoituron]

After a quick verification, the underlying web component seems to accept a new "list" attribute to reference a "datalist" (by id). Can you try, adding this list attribute?

[juliansiebert]

Hi Denis, thanks for the quick reply!

I am aware of the other components that would give similar capabilities, but the DataList attribute on the FluentTextInput component serves no other purpose, so it should either work as expected or be removed.

To answer your second comment, the DataList attribute gets mapped directly to the "list" attribute:
https://github.com/microsoft/fluentui-blazor/blob/dev-v5/src/Core/Components/TextInput/FluentTextInput.razor#L15

    <fluent-text-input @ref="@Element"
[...]
                       list=@DataList

But the id of the datalist element can not be resolved from inside the components Shadow DOM.
If I change the scope of the datalist manually to be inside its scope (via DevTools drag & drop), it starts to work as expected.

Before:

After:

[dvoituron]

You right. The DataList attribute need to work 😊

I will work on that next week.