[Gallery][Wasm]Grid-For 'Form Example' section when changing theme, Auto filled text for 'Last name', 'first name' is not changing.

[sakshi173]

Current behavior

https://github.com/unoplatform/uno/assets/74563602/c72c8288-4458-4094-84ac-7d592986e19c

Expected behavior

Text should change when theme get change.

How to reproduce it (as minimally and precisely as possible)

1. Open Uno Gallery APP
2. Tap Burger Menu on the left top right.
3. Change theme in dark mode.
4. Tap "Grid" from the "UI Component" list.
5. Go to 'Form Example' section.
6. Put Cursor inside the 'First Name' textbox.
7. Detail should display to auuto filled the textbox.
8. Click the text of autofilled section.
9. Notice the text is displaying in the text field.
10. Change theme from Dark to Light theme.
11. Notice the text is not visible in light theme.

Workaround

No response

Works on UWP/WinUI

None

Environment

No response

NuGet package version(s)

No response

Affected platforms

WebAssembly

IDE

No response

IDE version

No response

Relevant plugins

No response

Anything else we need to know?

No response

[Marc-Antoine-Soucy]

I cannot reproduce, can you try again, @sakshi173 ?

[sakshi173]

Hi @Marc-Antoine-Soucy, in the textbox field please don't type text, the text should be filled by the auto text. Below is the screenshot.

[Marc-Antoine-Soucy]

So, with this code in the xaml :

<Grid ColumnSpacing="30" RowSpacing="30">

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="300" />
            <ColumnDefinition Width="300" />
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition Height="75" />
            <RowDefinition Height="75" />
        </Grid.RowDefinitions>

        <TextBox
            Grid.Row="0"
            Grid.Column="0"
            Foreground="{ThemeResource ExampleTextForeground}"
            Header="First name" />
        <TextBox
            Grid.Row="0"
            Grid.Column="1"
            Foreground="{ThemeResource ExampleTextForeground}"
            Header="Last name" />
        <TextBox
            Grid.Row="1"
            Grid.Column="0"
            Grid.ColumnSpan="2"
            Foreground="{ThemeResource ExampleTextForeground}"
            Header="Address" />

        <Button
            Grid.Row="1"
            Grid.Column="1"
            Click="Button_Click"
            Content="Change theme"
            Foreground="{ThemeResource ExampleTextForeground}" />

    </Grid>

and this in the code behind

private bool a = true;

private void Button_Click(object sender, RoutedEventArgs e)
{
    // Set theme for window root.
    if (global::Microsoft.UI.Xaml.Window.Current.Content is FrameworkElement root)
    {
        if (a)
        {
            root.RequestedTheme = ElementTheme.Dark;
        }
        else
        {
            root.RequestedTheme = ElementTheme.Light;
        }

        a = !a;
    }
}

BasicApp.zip

I get this:

The foreground I added is not really important, for this bug in particular, but it sorts of shows another bug. Which is that the color of the text from the textbox you are in when you choose autocomplete does not use the same foreground as the other textbox.

[jeromelaban]

I can reproduce this issue in the latest 5.0 canary, and it seems to be related to some missing event to change the text color when being entered automatically via the autofill browser feature (in Chrome at least).

[Marc-Antoine-Soucy]

I'm not sure if it's fixable, but, I don't think i'm stalling and not finding much when investigating so, I unassigned myself

[lesterbotello]

I have tested this in the following browsers:

• Microsoft Edge (chromium)
• Google Chrome
• Google Chrome Canary
• Firefox
• Safari (MacOS)

The behavior is the same in all Chromium browsers, as well as in Safari (testable only via @Marc-Antoine-Soucy's test app since I couldn't get to run Uno.Gallery using VSCode on macOS).

In Firefox, I wasn't able to trigger auto-complete at all, but it might be a thing with the browser not recognizing the fields correctly as "auto-fillable" (more info here).

[MartinZikmund]

The whole problem boils down to the fact that the autofill rule we have uses transition that is so long, that there is no browser-forced change in background cxolor and foreground color. Unfortunately this also means that our own changes to the color will take those 60000 seconds = not take place until the user "commits" the autosuggested text

https://github.com/unoplatform/uno/blob/f3fbb2c6027dad6dd1efcd763d86cefcf678974f/src/Uno.UI/WasmCSS/Uno.UI.css#L158