Unpredictable behavior of multiline ComboBox with hint

[omllmo]

Bug explanation

Style Combobox - 'MaterialDesignFloatingHintComboBox'.
If ComboBoxItem takes up several lines, then ComboBox begins to behave incorrectly.

<Grid Width="500"  HorizontalAlignment="Stretch" Margin="15">
         <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
           </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                 <ColumnDefinition />
                 <ColumnDefinition Width="Auto" />
             </Grid.ColumnDefinitions>
             <materialDesign:PackIcon Kind="CardAccountMailOutline" Height="25" Width="25"/>
              <TextBlock Text="Test Test Test" Margin="30 2 0 10" Grid.ColumnSpan="3" VerticalAlignment="Bottom" FontSize="15"/>
               <Border HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Grid.ColumnSpan="3"
                            BorderBrush="{StaticResource WindowTitleColorBrush}" BorderThickness="1" Height="1"/>
                <ComboBox FontSize="14"
                              Grid.Row="1" Margin="10 30 0 0"
                              materialDesign:HintAssist.Hint="Test Test Test Test "
                              materialDesign:HintAssist.IsFloating="True"
                              materialDesign:TextFieldAssist.OutlinedBorderActiveThickness="0 0 0 0"
                              materialDesign:HintAssist.FloatingOffset="0 -25"
                              materialDesign:HintAssist.FloatingScale="1"
                              ItemTemplate="{StaticResource This.DataTemplate.Combobox.Items.UserMinInfo}"
                              SelectionChanged="CBSetupRecipientVisibleButton_SelectionChanged"/>
</Grid>

Version

5.1

[omllmo]

Also, unpredictable behavior is observed in a multi-line TextBox with a hint. The hint also starts to float when the window size is changed.

<TextBox Grid.Row="2" Grid.ColumnSpan="2" Margin="20 20 20 0" IsReadOnly="True"
                 TextWrapping="WrapWithOverflow"
                 materialDesign:HintAssist.IsFloating="True"
                 materialDesign:HintAssist.Hint="Content"
                 materialDesign:HintAssist.FloatingScale="1"
                 materialDesign:HintAssist.FloatingOffset="0 -35"
                 materialDesign:TextFieldAssist.DecorationVisibility="Collapsed"
                 materialDesign:TextFieldAssist.NewSpecHighlightingEnabled="False"
                 materialDesign:TextFieldAssist.UnderlineBrush="Transparent"
                Text="{Binding Content}"/>

[corvinsz]

I have played around with this a little and here is a minimal setup to reproduce this bug:

<ComboBox materialDesign:HintAssist.Hint="This is a long hint text"
          Style="{StaticResource MaterialDesignFloatingHintComboBox}">
  <ComboBox.Items>
    <ComboBoxItem>
      <TextBlock Text="Single row"/>
    </ComboBoxItem>
    <ComboBoxItem>
      <TextBlock Text="These&#x0a;are&#x0a;multiple&#x0a;rows"/>
    </ComboBoxItem>
  </ComboBox.Items>
</ComboBox>

Result:

[nicolaihenriksen]

@omllmo @corvinsz When determining the placement of the hint, there are a multitude of factors that need to be taken into account (e.g. alignment in relation to prefix-text, leading-icon, suffix-text, trailing-icon, clear-icon, etc.). It is most certainly possible to get some sub-optimal behavior with certain settings. So while I acknowledge the issues you have shown here are annoying, they were - to some extend at least - considered and accepted when the hint implementation was done.

The main "trigger" for the weird behavior is the multi-line use. The assumption is that the most common use case for a TextBox is a single line, so the default settings are aimed at making that use case look nice. In case you want a TextBox to allow multi-line input, I suggest you set AcceptsReturn=True (not solely relying on TextWrapping) and VerticalContentAlignment=Stretch on the TextBox which should give you a more reasonable hint behavior. There are also other (attached) properties which can be set to tweak the visualization.

The scenario you show with a ComboBox where each ComboBoxItem has a different height, is not something I would suspect people run into. I find it hard to believe there is an actual use case for this out there. At least not a use case where the developer (or the UX department) is fine with the ComboBox changing height based on the selected value in it. But perhaps I am too narrow minded 🤷

So I would urge you to play around with VerticalContentAlignment along with the attached properties in HintAssist and TextFieldAssist for the cases where your element is "non-standard". It may also be desirable to ensure a fixed size for your element in some cases, but that is something you would need to determine case by case.

[omllmo]

There were no such problems in version 4. In version 5, no settings give the desired result. ComboBox and TextBox allow you to have more than one line. And I don’t understand why I should refuse to use it like that. The only solution for me now is to refuse to use ComboBox and TextBox with hints, or to return to version 4.

[nicolaihenriksen]

There were no such problems in version 4. In version 5, no settings give the desired result. ComboBox and TextBox allow you to have more than one line. And I don’t understand why I should refuse to use it like that. The only solution for me now is to refuse to use ComboBox and TextBox with hints, or to return to version 4.

There were MANY problems in v4 and prior versions. Many of which where the driver behind the refactor. Just glance at the issues reported. Maybe they did not affect your use, but to claim there were no problems is simply wrong.

[omllmo]

Of course, I am speaking from my personal experience. These elements behaved predictably for me. I could customize any TemplateItem and get predictable behavior. But after upgrading to version 5, these multi-line elements with hints in my project started to behave unpredictably. I would not like to give up using hints with these elements.

[nicolaihenriksen]

@omllmo Can I ask you to put some more details on exactly what is not working in your cases? I would like to get a clear view of what you experience vs what you expect. With that in hand, and ideally some useful repro code (perhaps what you have already posted is fine), I would like to spend some time to see if I can address your issues.

I think I'll have some time to spend tonight on this...

[omllmo]

Thank you. The code is written in the first message.
This is how it was in version 4:

And now the same code in version 5:

In version 4, the ComboBox has Margin="10 10 0 0". To achieve approximately the same position of the ComboBox from the upper border in version 5, I had to make Margin="10 30 0 0".
As you can see, the hint, and the selected element in the ComboBox itself, shift unpredictably vertically.

[nicolaihenriksen]

@omllmo Would you be able to share the DataTemplate you are referencing in the code from the first message? Just so I can get as close to your setup as possible.

[nicolaihenriksen]

@omllmo I am also noticing that you're setting an explicit HintAssist.FloatingOffset which basically means you're opting out of the automatic positioning of the hint, and placing it yourself.

Your sample code also does not indicate which values you are populating the ComboBox with. Could you provide that as well?

[nicolaihenriksen]

@omllmo For now, I will take a look at the sample which @corvinsz provided, as that is easy for me to reproduce; I hope it reflects the issue that you're facing.

[nicolaihenriksen]

@omllmo @corvinsz I suspect the issue is related to the hint position not being recalculated when the "host element" changes size. Unfortunately I cannot see a good way of binding to the ActualHeight or similar of the "host element" without having to introduce a DP actually pointing to said "host element".

The good news is though, if I add a DP through which I can trigger the hint position recalculation based on a change in size (currently height only), it seems to behave as it should.

You can try to check out this branch (pocFixFor3675) where I have added the "POC fix". The latest code on the branch behaves correctly, but if you revert the last commit on there (which sets the SmartHint.HintHost DP in the ComboBox template, you should see the issue described by @corvinsz being reintroduced.

Selecting the single-line entry first:

Selecting the multi-line entry first: