HintAssist.Hint text is cut-off

[reyntjesr]

Bug explanation

I am currently stuck to version 4.6.1 of materialdesignthemes. This is how my
textboxes with MaterialDesignFloatingHintTextBox Style look now.


If I try to upgrade to a later version than 4.6.1 the HintAssist.Hint texts is cut-off

I didn't change the MaterialDesignFloatingHintTextBox style in the example above much. The problem persists if I use the standard MaterialDesignFloatingHintTextBox style.

            <Style TargetType="{x:Type TextBox}" BasedOn="{StaticResource MaterialDesignFloatingHintTextBox}">
                <Setter Property="Margin" Value="20 10 20 10" />
                <Setter Property="FontWeight" Value="DemiBold" />
                <Setter Property="FontSize" Value="16" />
                <Setter Property="materialDesign:ValidationAssist.FontSize" Value="12" />
            </Style>

The problem looks a bit like these issues, but these are closed:
#3055
#2686

Version

4.6.1

[nicolaihenriksen]

@reyntjesr Judging from your screenshots, it seems to me that the width of the TextBox - as a whole - is limited in your layout. The underline, which is part of the TextBox itself (i.e. not hint/helper) is rather short.

Could you share the XAML that lays out these text boxes so I can see if I can spot the issue there?

The bugs you link to have been fixed by refactoring the hint/helper placements somewhat, and that can potentially be what you're experiencing now.

[reyntjesr]

The textboxes are in a ReactiveUI usercontrol. The xaml of this UserControl you see below.
But I have this issue with all my programs that use MaterialDesignThemes. These programs share a common xaml file that I'll also include below.

The usercontrol:

<reactiveui:ReactiveUserControl x:Class="MoveToHix.Views.FileInformationControl"
                              x:TypeArguments="vm:FileInformationViewModel"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:Properties="clr-namespace:MoveToHix.Properties"
             xmlns:local="clr-namespace:MoveToHix.Views"
             xmlns:vm="clr-namespace:MoveToHix.ViewModels"
             xmlns:model="clr-namespace:MoveToHix.Models"
             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
             xmlns:reactiveui="http://reactiveui.net"
             mc:Ignorable="d" 
             d:DataContext="{d:DesignInstance Type=vm:FileInformationViewModel IsDesignTimeCreatable=true}"
             d:DesignHeight="450" d:DesignWidth="800" >
    <UserControl.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.TextBox.xaml" />
            </ResourceDictionary.MergedDictionaries>
            <Style TargetType="{x:Type TextBox}" BasedOn="{StaticResource MaterialDesignFloatingHintTextBox}">
                <Setter Property="Margin" Value="20 10 20 10" />
                <Setter Property="FontWeight" Value="DemiBold" />
                <Setter Property="FontSize" Value="16" />
                <Setter Property="materialDesign:ValidationAssist.FontSize" Value="12" />
            </Style>
            <BooleanToVisibilityConverter x:Key="BoolToVisConverter" />
            <Style x:Key="labelStyle" TargetType="{x:Type Label}">
                <Setter Property="ContentStringFormat" Value='{}{0}: '/>
            </Style>
            <DataTemplate DataType="{x:Type vm:SelectedItem}">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <TextBox Text="{Binding  Path=FilePath, Mode=OneWay}" IsReadOnly="True"/>
                </Grid>
            </DataTemplate>

            <Style TargetType="{x:Type ItemsControl}">
                <Setter Property="Margin" Value="8" />
            </Style>
        </ResourceDictionary>
    </UserControl.Resources>
    <ScrollViewer HorizontalScrollBarVisibility="Auto" MaxWidth="15cm" VerticalScrollBarVisibility="Auto">
        <Grid Margin="20">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <TextBlock Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Text="{x:Static Properties:Resources.SelectedFiles}"/>
            <ItemsControl Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" ItemsSource="{Binding Files}" VerticalAlignment="Top"/>
            <TextBox Grid.Row="2" Grid.Column="0" x:Name="labAssInitials"  materialDesign:HintAssist.Hint="{Binding LabAssistantInitialsText}"
                     Text="{Binding CurrentExtraInfo.LabAssistantInitials, UpdateSourceTrigger=PropertyChanged}"/>
            <TextBox Grid.Row="3" Grid.Column="0" x:Name="physAssInitials"  materialDesign:HintAssist.Hint="{Binding PhysAssistantInitialsText}"
                     Text="{Binding CurrentExtraInfo.PhysAssistantInitials, UpdateSourceTrigger=PropertyChanged}"/>
            <TextBox Grid.Row="4" Grid.Column="0" x:Name="physicianInitials"  materialDesign:HintAssist.Hint="{Binding PhysicianInitialsText}"
                     Text="{Binding CurrentExtraInfo.PhysicianInitials, UpdateSourceTrigger=PropertyChanged}"/>
            <TextBox Grid.Row="5" Grid.Column="0" x:Name="remarks"  materialDesign:HintAssist.Hint="{x:Static Properties:Resources.Remarks}"
                     TextWrapping="Wrap" AcceptsReturn="True">
                <TextBox.Text>
                    <Binding Path="CurrentExtraInfo.Remarks" Mode="TwoWay" UpdateSourceTrigger="PropertyChanged">
                    </Binding>
                </TextBox.Text>
            </TextBox>
            <Button Grid.Row="6" Grid.Column="0" Content="Resend files"
                    HorizontalAlignment="Left"
                    Command="{Binding Path=ResendFilesCommand}" 
                    Height="25" Width="Auto" Padding="10,1,10,1"
                    Visibility="Collapsed"></Button>
        </Grid>
    </ScrollViewer>
</reactiveui:ReactiveUserControl>

The shared xaml file:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:conv="clr-namespace:Wpf.Reactive.Converters"
                    xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes">
    <!-- ListBox -->
    <ResourceDictionary.MergedDictionaries>
        <materialDesign:MahAppsBundledTheme BaseTheme="Light" PrimaryColor="DeepPurple" SecondaryColor="Purple" />
        <!-- MahApps -->
        <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Button.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.CheckBox.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.ListBox.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.PopupBox.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.RadioButton.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.TextBlock.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.ToggleButton.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.TextBox.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.ComboBox.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Button.xaml" />
        <!-- theme resource -->
        <!-- change "BaseLight" to the theme you want -->
        <!-- accent resource -->
        <!-- change "Cobalt" to the accent color you want -->

        <!-- Material Design -->
        <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.DeepPurple.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml" />

        <!-- Material Design: MahApps Compatibility -->
        <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.MahApps;component/Themes/MaterialDesignTheme.MahApps.Fonts.xaml" />

    </ResourceDictionary.MergedDictionaries>
    <!-- Converters -->
    <conv:EnumerableToStringConverter x:Key="enumerableToStringConverter"/>
    <conv:VisibilityToBoolConverter x:Key="visConverter"/>
    <conv:ColorToBrushConverter x:Key="colorToBrushConverter"/>
    <conv:DebuggingConverter x:Key="debugConverter"/>
    <conv:ForceReReadConverter x:Key="forceReReadConverter" />
    <conv:GenderConverter x:Key="genderConverter"/>
    <conv:NotConverter x:Key="notConverter"/>
    <conv:CombineConverter x:Key="notAndVisibilityConverter">
        <conv:NotConverter/>
        <conv:VisibilityToBoolConverter/>
    </conv:CombineConverter>

    <!-- Icons -->
    <Geometry x:Key="OkPathData">M13.13,26.25 L24,37.50 L34.88,11.25</Geometry>
    <Geometry x:Key="CancelPathData">M13.13,34.88 L34.88,13.13 M13.13,13.13 L34.88,34.88</Geometry>
    <Geometry x:Key="SyncPathData">M13.14,15.88 A12.75,12.75 0 0,1 36.75,24 L38.63,24 L36.75,25.88 L34.88,24 L36.75,24 M34.88,31.13 A12.75,12.75 0 0,1 11.25,24 L9.38,24 L11.25,22.13 L13.13,24 L11.25,24</Geometry>
    <Geometry x:Key="ImportPathData">M13.13,16.88 L18.75,24 L32.81,24 L32.81,22.13 L34.69,24 L32.81,25.88 L32.81,24</Geometry>
    <Geometry x:Key="ExportPathData">M34.88,16.88 L29.25,24 L15.19,24 L15.19,22.13 L13.31,24 L15.19,25.88 L15.19,24</Geometry>
    <Geometry x:Key="PlusPathData">M12.5,22.5 L32.5,22.5 M22.5,12.5 L22.5,32.5</Geometry>
    <!--L15,10 M10,5 L10,15-->
    <Path x:Key="PlusPathDataTest" Stretch="Fill" Data="M5,10 L15,10 M10,5 L10,15"></Path>
    <Geometry x:Key="MinusPathData">M5,10 L15,10</Geometry>
    <Geometry x:Key="CopyPathData">M0,2 L10,2 L12,4 L12,16 L0,16 L0,3 M2,0 L12,0 L14,2 L14,14 L12,14</Geometry>
    <Geometry x:Key="DeletePathData">M2.34,13.66 A8,8 0 0,1 13.66,2.34 L2.34,13.66 A8,8 0 0,0 13.66,2.34</Geometry>
    <Geometry x:Key="DotDotDotPathData">M6.5,13 L7,13 M9.75,13 L10.25,13 M13,13 L13.5,13</Geometry>

    <!-- Colors & Brushes -->
    <Color x:Key="EmphasisColor">#FF00A9DA</Color>
    <Color x:Key="ToolbarTextColor">#FF888888</Color>
    <Color x:Key="DarkBorderColor">#FF888888</Color>
    <Color x:Key="BorderColor">#FFEEEEEE</Color>
    <Color x:Key="ErrorColor">#FFE22828</Color>
    <Color x:Key="DarkHighLightColor">#FFAAAAAA</Color>
    <Color x:Key="HighLightColor">#FFF5F5F5</Color>

    <SolidColorBrush x:Key="EmphasisBrush" Color="{StaticResource EmphasisColor}"/>
    <SolidColorBrush x:Key="ToolbarTextBrush" Color="{StaticResource ToolbarTextColor}"/>
    <SolidColorBrush x:Key="DarkBorderBrush" Color="{StaticResource DarkBorderColor}"/>
    <SolidColorBrush x:Key="BorderBrush" Color="{StaticResource BorderColor}"/>
    <SolidColorBrush x:Key="ErrorBrush" Color="{StaticResource ErrorColor}"/>
    <SolidColorBrush x:Key="DarkHighLightBrush" Color="{StaticResource DarkHighLightColor}"/>
    <SolidColorBrush x:Key="HighLightBrush" Color="{StaticResource HighLightColor}"/>

    <!-- MahApps Brushes -->
    <SolidColorBrush x:Key="HighlightBrush" Color="{DynamicResource Primary700}"/>
    <!--<SolidColorBrush x:Key="AccentColorBrush" Color="{DynamicResource Primary500}"/>-->
    <SolidColorBrush x:Key="AccentColorBrush2" Color="{DynamicResource Primary400}"/>
    <SolidColorBrush x:Key="AccentColorBrush3" Color="{DynamicResource Primary300}"/>
    <SolidColorBrush x:Key="AccentColorBrush4" Color="{DynamicResource Primary200}"/>
    <SolidColorBrush x:Key="WindowTitleColorBrush" Color="{DynamicResource Primary700}"/>
    <SolidColorBrush x:Key="AccentSelectedColorBrush" Color="{DynamicResource Primary500Foreground}"/>
    <LinearGradientBrush x:Key="ProgressBrush" EndPoint="0.001,0.5" StartPoint="1.002,0.5">
        <GradientStop Color="{DynamicResource Primary700}" Offset="0"/>
        <GradientStop Color="{DynamicResource Primary300}" Offset="1"/>
    </LinearGradientBrush>

    <SolidColorBrush x:Key="CheckmarkFill" Color="{DynamicResource Primary500}"/>
    <SolidColorBrush x:Key="RightArrowFill" Color="{DynamicResource Primary500}"/>
    <SolidColorBrush x:Key="IdealForegroundColorBrush" Color="{DynamicResource Primary500Foreground}"/>
    <SolidColorBrush x:Key="IdealForegroundDisabledBrush" Color="{DynamicResource Primary500}" Opacity="0.4"/>

    <Style x:Key="SelectableListBox" TargetType="{x:Type ListBox}">
        <Style.Resources>
            <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="{StaticResource HighLightColor}" />
            <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="{StaticResource HighLightColor}" />
        </Style.Resources>
    </Style>
    <Style x:Key="DataGridStyle" TargetType="{x:Type DataGrid}">
        <Setter Property="Margin" Value="0" />
        <Setter Property="AlternationCount" Value="2" />
        <Setter Property="CanUserAddRows" Value="False" />
        <Setter Property="AutoGenerateColumns" Value="False" />
        <Setter Property="AlternatingRowBackground" Value="AliceBlue" />
        <Setter Property="IsSynchronizedWithCurrentItem" Value="True" />
    </Style>
</ResourceDictionary>

[nicolaihenriksen]

@reyntjesr The Grid below is what lays out your TextBox controls, and I think this is what needs to be tweaked.

<Grid Margin="20">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <TextBlock Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Text="{x:Static Properties:Resources.SelectedFiles}"/>
    <ItemsControl Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" ItemsSource="{Binding Files}" VerticalAlignment="Top"/>
    <TextBox Grid.Row="2" Grid.Column="0" x:Name="labAssInitials"  materialDesign:HintAssist.Hint="{Binding LabAssistantInitialsText}"
             Text="{Binding CurrentExtraInfo.LabAssistantInitials, UpdateSourceTrigger=PropertyChanged}"/>
    <TextBox Grid.Row="3" Grid.Column="0" x:Name="physAssInitials"  materialDesign:HintAssist.Hint="{Binding PhysAssistantInitialsText}"
             Text="{Binding CurrentExtraInfo.PhysAssistantInitials, UpdateSourceTrigger=PropertyChanged}"/>
    <TextBox Grid.Row="4" Grid.Column="0" x:Name="physicianInitials"  materialDesign:HintAssist.Hint="{Binding PhysicianInitialsText}"
             Text="{Binding CurrentExtraInfo.PhysicianInitials, UpdateSourceTrigger=PropertyChanged}"/>
    <TextBox Grid.Row="5" Grid.Column="0" x:Name="remarks"  materialDesign:HintAssist.Hint="{x:Static Properties:Resources.Remarks}"
             TextWrapping="Wrap" AcceptsReturn="True">
        <TextBox.Text>
            <Binding Path="CurrentExtraInfo.Remarks" Mode="TwoWay" UpdateSourceTrigger="PropertyChanged">
            </Binding>
        </TextBox.Text>
    </TextBox>
    <Button Grid.Row="6" Grid.Column="0" Content="Resend files"
            HorizontalAlignment="Left"
            Command="{Binding Path=ResendFilesCommand}" 
            Height="25" Width="Auto" Padding="10,1,10,1"
            Visibility="Collapsed"></Button>
</Grid>

Firstly, it defines 2 columns which are both set to auto-size (i.e. Width="Auto") which will cause the grid to only take up the space it needs and since the TextBox instances don't have an explicit Width, they too will shrink down to fit their content.

Secondly, it does not seem like the second column is used for anything? Unless something is left out in the provided code.
UPDATE: I was too quick here, some elements span both columns. It is not clear to me exactly what the second column is reserved for. Seems to me like it could be avoided.

I think you should set Width="*" on the first column to allow the column containing the text boxes to fill the entire available width of its parent container. I suspect this is the culprit of your issue.

[reyntjesr]

Thanks for your help!
I tried setting the ColumnDefinition of the first column to "*".
I also tried removing the second column and the controls with Grid.ColumnSpan="2". When I run my program now the width of the textboxes are almost totally collapsed until I start typing something in the textboxes.

As I said I, have this issue with all the textboxes in the three programs I'm developing and also when I change the TextBox style from MaterialDesignFloatingHintTextBox to MaterialDesignOutlinedTextBox or MaterialDesignFilledTextBox.

So in my programs the width of the textbox of materialdesignthemes versions higher than 4.6.1 only depend on the width of the Text field and not on the HintAssist.Hint width anymore.

[nicolaihenriksen]

@reyntjesr The TextBox width should not depend on the width of the hint text, because the hint text is rendered in a Canvas that is moved (e.g. "floated") and scaled and as such cannot be considered "part" of the TextBox. It "kindof" worked that way in the v. 4.6.1 and earlier, but it didn't work properly and thus was changed.

If setting the column to "*" does not solve your issue, then you have a similar issue further up the visual tree. In the code below I have - for demonstration purposes - hardcoded the width of a Grid to something wider than the content of the TextBox hints. As you can see, the TextBox fills the available space. I added a green background to the grid just to indicate the bounds.

<Grid Width="300" Background="LightGreen">
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="Auto" />
  </Grid.ColumnDefinitions>
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="Auto"/>
  </Grid.RowDefinitions>

  <TextBlock Text="Some TextBlock" Grid.Column="0" Grid.ColumnSpan="2" Margin="5" />

  <TextBox Grid.Column="0" Grid.Row="1" materialDesign:HintAssist.Hint="Short hint" Margin="5" />
  <TextBox Grid.Column="0" Grid.Row="2" materialDesign:HintAssist.Hint="A longer hint text" Margin="5" />
</Grid>

So either you need to adjust the ScrollViewer in your user control to take up the available space (perhaps wrap it in a Grid or use HorizontalAlignment="Stretch" or similar), or you need to go up to where you actually use a ReactiveUserControl and see which container you're placing that in. Snoop is an excellent tool for debugging issues like this and will allow you to pin-point which element is causing the limited width you're seeing.

[reyntjesr]

Of course the size of the textbox should depend on the size of the hint. The hint gives information about what should be filled in the textbox. Is there anyone who only wants to show half the hint?
I don't think a technical reason like the hint text being rendered in a Canvas, changes the fact that someone who writes a hint wants to show the whole hint.

As I said I have several programs that all use a lot of textboxes. I have to manually set a MinWidth on all of them now. And when I change the program to another language I have to check for text cut-offs again.
This is all very inconvenient.

[nicolaihenriksen]

Of course the size of the textbox should depend on the size of the hint.

I disagree. The hint is optional extra information. Also, once you start typing anything in the TextBox, the hint is either collapsed or scaled+floated depending on the style; would you really want your UI to shrink your text boxes as soon as they gain keyboard focus?
I consider the hint and the helper text to be very similar in this regard, and I don't think either of them should influence the size of the TextBox, on the contrary I think they should respect it - they are after all both optional.

If you really want your hint/helper to be the determining factor for the Width of the TextBox, I would suggest you write a behavior which can set the width of the text box based on the width of the hint text - possibly using a binding and a converter. This behavior can be applied globally to affect all text boxes, but that of course requires you to have hint/helper on all of them. However, I don't think this is the right approach.

As I said I have several programs that all use a lot of textboxes. I have to manually set a MinWidth on all of them now. And when I change the program to another language I have to check for text cut-offs again.

To me, this sound like a more general layout issue in your application. If you allow everything in your visual tree to "size to content", I think you're asking for trouble. Also, setting MinWidth on the text boxes - to me - seems like the wrong place to "fix the issue". I would do it on a parent container element instead.

I don't think a technical reason like the hint text being rendered in a Canvas, changes the fact that someone who writes a hint wants to show the whole hint.

On this point we somewhat agree. I would expect the complete hint to be shown if there is room for it in the space reserved for the TextBox. A fixed Width or MaxWidth property in any visual ancestor may have been set, at which point you may or may not see the complete hint (perhaps it fits when it is floated and scaled down).
If no specific space is reserved for the TextBox (i.e. "size to content"), I would expect it to behave like any other UIElement (including a standard-style WPF TextBox) which means it should collapse down to a width (and possibly height) of 0 - or very close to it - when it has no content; again I don't consider the hint text content.

[Tokter]

I think both views have merit. But the main problem is that the behavior changed. Before the TextBox would show the hint, now it's cut off. If you update to the latest version, you suddenly encounter this issue.

That should probably be mentioned as a breaking change somewhere.

[nicolaihenriksen]

@Tokter I do agree that both views have merit. Especially the translations scenario. Thus I will create a new draft PR to work on a solution that handles this better.

Regarding your comment on the breaking (visual) change. This was actually marked in all of the PRs (#3074, #3086, and #3056) and actually also mentioned in the 4.8.0 release notes, albeit without a whole lot of detail about HOW it was visually breaking.