dotnet / maui

.NET MAUI is the .NET Multi-platform App UI, a framework for building native device applications spanning mobile, tablet, and desktop.
https://dot.net/maui
MIT License
21.82k stars 1.66k forks source link

Calling Focus() on an Entry befor it has been displayed causes ClearButton to be displayed permanently #23112

Open AlphaWolvsblood opened 2 weeks ago

AlphaWolvsblood commented 2 weeks ago

Description

If you add a Entry with ClearButtonVisibility = ClearButtonVisibility.Never via code and call its Focus()-Methode befor the UI-Thread had time to update, the entry will always show its ClearButton.

image

This will not occure if ClearButtonVisibility = ClearButtonVisibility.WhileEditing.

Under Android, it seems to work fine: image

Steps to Reproduce

Use the following content for your MainPage.xaml

  <ScrollView>
      <VerticalStackLayout x:Name="mainLayout" Padding="30,0" Spacing="25">
          <Button Text="Add 'Never' Entry"  Clicked="OnAddNeverEntry" HorizontalOptions="Fill" />
          <Button Text="Add 'While Editing' Entry"  Clicked="OnAddWhileEntry" HorizontalOptions="Fill" />
          <Button Text="Add 'Never' Entry - then change"  Clicked="OnAddNeverEntryThenChange" HorizontalOptions="Fill" />
          <Button Text="Add 'While Editing' Entry - then change"  Clicked="OnAddWhileEntryChange" HorizontalOptions="Fill" />
      </VerticalStackLayout>
  </ScrollView>

Use the following methods for your MainPage.xaml.cs

  private void OnAddNeverEntry(object sender, EventArgs e)
  {
      Entry entry = new Entry() { ClearButtonVisibility = ClearButtonVisibility.Never, Text = "Some Text"};
      mainLayout.Children.Add(entry);
      entry.Focus();
  }

  private void OnAddWhileEntry(object sender, EventArgs e)
  {
      Entry entry = new Entry() { ClearButtonVisibility = ClearButtonVisibility.WhileEditing, Text = "Some Text" };
      mainLayout.Children.Add(entry);
      entry.Focus();
  }

  private void OnAddNeverEntryThenChange(object sender, EventArgs e)
  {
      Entry entry = new Entry() { ClearButtonVisibility = ClearButtonVisibility.Never, Text = "Some Text" };
      mainLayout.Children.Add(entry);
      entry.ClearButtonVisibility = ClearButtonVisibility.WhileEditing;
      entry.Focus();
  }

  private void OnAddWhileEntryChange(object sender, EventArgs e)
  {
      Entry entry = new Entry() { ClearButtonVisibility = ClearButtonVisibility.WhileEditing, Text = "Some Text" };
      mainLayout.Children.Add(entry);
      entry.ClearButtonVisibility = ClearButtonVisibility.Never;
      entry.Focus();
  }

After launching your app, you can add entrys to the layout by pressing the buttons. Pressing the first or fourth button adds an entry with a permanent ClearButton will be displayed. Pressing the second or third button adds an entry will be displayed where the ClearButton is only beeing displayed while editing

If you delay the call of Focus(), it works fine.

  private void OnAddNeverEntry(object sender, EventArgs e)
  {
      Entry entry = new Entry() { ClearButtonVisibility = ClearButtonVisibility.Never, Text = "Some Text"};
      mainLayout.Children.Add(entry);
      Dispatcher.DispatchDelayed(TimeSpan.FromSeconds(1), () =>
      {
          entry.Focus();
      });
  }

Link to public reproduction project repository

No response

Version with bug

8.0.40 SR5

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

Windows

Affected platform versions

net8.0-windows10.0.17763.0 and net9.0-windows10.0.19041.0

Did you find any workaround?

  1. Call the Focus()-Methode after the entry has been displayed
  2. Modify App.xaml under Windows to create a custom style for entrys, based on the default style https://github.com/microsoft/microsoft-ui-xaml/blob/winui3/release/1.5.1/controls/dev/CommonStyles/TextBox_themeresources.xaml, where u remove the content of VisualState "ButtonVisible". This will remove the ClearButton completly.

Relevant log output

No response

github-actions[bot] commented 2 weeks ago

Hi I'm an AI powered bot that finds similar issues based off the issue title.

Please view the issues below to see if they solve your problem, and if the issue describes your problem please consider closing this one and thumbs upping the other issue to help us prioritize it. Thank you!

Closed similar issues:

Note: You can give me feedback by thumbs upping or thumbs downing this comment.

AlphaWolvsblood commented 2 weeks ago

The cause for this issue might be related to #13714, as it shows a similar unexpected behavior, but taking different steps to reproduce

MartyIX commented 1 week ago

@AlphaWolvsblood I created #23158. Perhaps you could test if the PR actually fixes your issue.

FWIW, the PR helps with my own issue (not reported) but likely the same as yours.

MartyIX commented 1 week ago

Possible workaround when one never wants those clear buttons in entries is to modify <PROJECT>/Platforms/Windows/App.xaml like this:

<maui:MauiWinUIApplication
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:maui="using:Microsoft.Maui"
    xmlns:local="using:App.WinUI"
    x:Class="App.WinUI.App">

    <!-- An underline appears in text controls on Windows when text controls get focus. -->
    <!-- Turn it off as it clashes with our validation effects. -->
    <maui:MauiWinUIApplication.Resources>
        <Thickness x:Key="TextControlBorderThemeThickness">0</Thickness>
        <Thickness x:Key="TextControlBorderThemeThicknessFocused">0</Thickness>

+       <!-- Remove clean button for text boxes. -->
+       <Color x:Key="TextControlButtonBackgroundPointerOver">Transparent</Color>
+       <Color x:Key="TextControlButtonBackgroundPressed">Transparent</Color>
+       <Color x:Key="TextControlButtonBorderBrush">Transparent</Color>
+       <Color x:Key="TextControlButtonBorderBrushPointerOver">Transparent</Color>
+       <Color x:Key="TextControlButtonBorderBrushPressed">Transparent</Color>
+       <Color x:Key="TextControlButtonForeground">Transparent</Color>
+       <Color x:Key="TextControlButtonForegroundPointerOver">Transparent</Color>
+       <Color x:Key="TextControlButtonForegroundPressed">Transparent</Color>

        <CornerRadius x:Key="ControlCornerRadius">0</CornerRadius>
    </maui:MauiWinUIApplication.Resources>
</maui:MauiWinUIApplication>

But it's far from perfect.