[Bug] [V1.3] SfTextInputLayout does not update its color when changing theme sometimes

[malsabi]

Description

Here is an example of my xaml snippet for using the SfTextInputLayout. I'm not sure if the issue is from my side or not, but sometimes the color works properly when changing the theme but sometimes the color is not updated. I can see this issue in Windows, iOS and android.

<inputLayout:SfTextInputLayout Grid.Row="0"
                                 Hint="{ext:Translate Name=Assessments_SearchPlaceHolder}"
                                 IsEnabled="{Binding IsBusy, Converter={StaticResource InvertedBoolConverter}}"
                                 Style="{StaticResource TextInputLayoutStyle}">
<inputLayout:SfTextInputLayout.LeadingView>
<Image Aspect="Center"
                 Source="{StaticResource SearchIcon}" />
</inputLayout:SfTextInputLayout.LeadingView>
 
      <Entry Text="{Binding SearchTextQuery}"
             Style="{StaticResource TextInputEntryStyle}">
<Entry.Behaviors>
<toolkit:EventToCommandBehavior EventName="TextChanged"
                                              Command="{Binding SearchTextQueryChangedCommand, x:DataType=viewModels:AssessmentsViewModel}"
                                              BindingContext="{Binding BindingContext, Source={x:Reference Root}, x:DataType=ContentPage}" />
</Entry.Behaviors>
</Entry>
 
      <VisualStateManager.VisualStateGroups>
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Property="ContainerBackground" Value="{toolkit:AppThemeResource Shade3Color}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Property="ContainerBackground" Value="{toolkit:AppThemeResource Shade4Color}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</VisualStateManager.VisualStateGroups>
</inputLayout:SfTextInputLayout>

Steps to Reproduce

No response

Version with bug

1.0.3

Is this a regression from previous behavior?

No, this is a new issue

Last Known Working Version

1.0.2

Affected platforms

Windows

Affected Platform Versions

No response

Have you found a workaround?

No workaround

Relevant log output

[Choza-rajan]

@malsabi We have reviewed the reported issue using the provided code snippet. However, we were unable to reproduce the issue "SfTextInputLayout does not update its color when changing theme sometimes" with .NET 9 and MAUI v9.0.50. The SfTextInputLayout responds to the theme switch properly in our testing.

To assist you further, we have attached our tested sample and an output video for your reference. Kindly test the attached sample and let us know if you encounter the issue in the sample.

If the issue still persists on your end, please share more details to help us better understand the problem. Specifically, it would be helpful if you could provide:

1. The exact .NET and MAUI versions you are using.
2. Any custom styles or configurations applied to the SfTextInputLayout.
3. How you are switching themes and its configurations.
4. A simple reproducible sample that demonstrates the issue.

This will allow us to investigate further and provide a more precise solution. Looking forward to your response

TextInputLayoutSample.zip

[malsabi]

I'm sorry, I forgot to mention this extra step. However, I couldn't replicate the issue in a small repository. It still occurs in my main app, but I can't share it here for privacy reasons.

Steps to Reproduce:

1. Open the Home Page, which displays the SfTextInputLayout.

2. Navigate to the Details Page.

3. Navigate back to the Home Page, then switch between Light and Dark themes.

Observed Issue:

• The text color and icon color of the LeadingView do not update.

• Only the container color updates correctly.

Additional Note:

• If I don't navigate to any other page and simply switch between Light and Dark themes, everything works as expected.
• The issue only occurs after navigating to the Details Page and then returning to the Home Page before changing the theme.
• If the issue has already occurred and I change the theme from Light to Dark, the text color remains black instead of updating to white. However, if I navigate to another page and return, the text color updates correctly.

[Choza-rajan]

Hi @malsabi ,

Thank you for your update and for providing the detailed steps to reproduce the issue.

We have tested the mentioned scenario by creating a new Details Page, adding a Label and an Icon, and setting their colors dynamically based on the Light and Dark themes.

During our testing, the text color and icon color of the LeadingView were correctly updated along with the container color. Additionally, we tested by placing SfTextInputLayout inside the Details Page, and the colors updated properly as expected.

For your reference, we have attached the tested sample. Kindly check it and let us know if the issue still persists on your end. If so, please share the XAML code of the page where SfTextInputLayout is implemented, along with the relevant ViewModel and any other necessary code snippets. This will help us investigate the issue more precisely and provide you with an appropriate solution.

TextInputLayoutSample.zip

Thanks,

[malsabi]

@Choza-rajan Thank you for your reply. I found out that the bug happens only when the "Details page" is implementing similar implementation of the SfTextInputLayout. So when you navigate back to the Main page you will see that the bug is happening and the colors are not updating.

I have made a video and I updated the source code.
If there is a workaround please let me know.

TextInputLayoutSample.zip

inputlayout_issue.mp4

[Choza-rajan]

Hi @malsabi,

Query 1: Hint Label Color Not Working for Dynamic Theme

We have reviewed your sample and output demo and were able to reproduce the reported issue. In the MAUI toolkit framework, style changes for inner class properties are not supported after navigation. To resolve this, we need to modify the style for HintLabelStyle instead of applying changes to a specific property. We have defined light and dark label styles and assigned them to HintLabelStyle using DynamicResource, ensuring that it responds correctly to dynamic theme changes.

Workaround code:

 <inputLayout:LabelStyle x:Key="lightTheme" TextColor="{toolkit:AppThemeResource TextColor}"/> 
 <inputLayout:LabelStyle x:Key="darkTheme" TextColor="{toolkit:AppThemeResource TextColor}"/> 

<Style TargetType="inputLayout:SfTextInputLayout" x:Key="TextInputLayoutStyle"> 
        <Setter Property="WidthRequest" Value="200" /> 
        <Setter Property="ShowLeadingView" Value="True" /> 
        <Setter Property="HintLabelStyle" Value="{AppThemeBinding Light={DynamicResource lightTheme}, Dark={DynamicResource darkTheme}}"/> 
</Style> 

Query 2: FontImageSource Not Responding to Dynamic Theme

Regarding FontImageSource, we tested it with a simple Image control, and the issue occurs after navigation. We have reported this to the MAUI Framework team for further investigation. Until a solution is provided, we suggest using a Label for the font icon instead of FontImageSource as a workaround.

FontImageSource Github Link: 28782

Workaround code:

<Style TargetType="Label" x:Key="IconFluent"> 
        <Setter Property="TextColor" Value="{toolkit:AppThemeResource TextColor}"/> 
        <Setter Property="Text" Value=""/> 
        <Setter Property="FontFamily" Value="MauiFluent"/> 
</Style> 

For your reference, we have attached the modified sample below. Kindly check it out and let us know if it resolves your issues.

TextInputLayoutSample_Apr03.zip

Thanks,

[malsabi]

@Choza-rajan Thank you for your reply. Is the first query considered an actual issue or we should rely on the workaround as the actual way of implementing it? I'm asking this, cause I cant see any status updated on this issue. It still says "Needs-repro" and no bug mentioned.

[Choza-rajan]

Hi @malsabi,

We have rechecked and confirmed that both Query 1 (HintLabelStyle) and Query 2 (FontImageSource) exhibit the same issue — dynamic color changes are not applied correctly to inner class properties in the MAUI framework side. Specifically, when changing themes, the styles do not update as expected after navigating away from the page and returning.

So, to conclude — this behavior is indeed a framework-level issue. Once the MAUI team resolves the dynamic update limitations for inner class properties, both the SfTextInputLayout and FontImageSource issues will be resolved as well.

Specifically, FontImageSource is an inner class of the ImageSource, just like HintLabelStyle is for SfTextInputLayout. When we perform dynamic changes to the FontImageSource color property directly, it doesn’t work. However, when we set a dynamic FontImageSource to the Image source itself, it works as expected — and this is the workaround we are currently using.

We hope this clears up the nature of the issue. For your reference, we’ve attached the modified sample demonstrating the workaround for FontImageSource. Kindly review it and let us know if it resolves your query.

TextInputLayoutSample_Apr04.zip

Thanks,

[malsabi]

@Choza-rajan Everything is clear now. Thank you.