TextBox HelperText Collapsed

[Frillaut]

Have a nice day!
If you point at the red field, the TextBox receives "focus." I think it's because of HelperText, maybe I'm wrong. Can I hide this field?

<StackPanel> <TextBox Style="{StaticResource MaterialDesignFilledTextBox}"/> <Border Background="Red" Height="14" IsHitTestVisible="False"/> </StackPanel>

[nicolaihenriksen]

@Frillaut Interesting find! And your assumption is spot on. This is the helper text "area" causing the IsMouseOver to become true.

One option could be to set IsHitTestVisible on the "FooterGrid" (see code). I'm not sure why anyone would ever want the "focus" to trigger when hovering a visible helper text; I'd only expect it when hovering the "standard content" of the TextBox control.

The above of course requires a change to the library. So as a temporary solution, you could try to override the HintAssist.HelperTextStyle and set that to IsHitTestVisible=false:

<StackPanel>
  <StackPanel.Resources>
    <Style x:Key="CustomHelperTextStyle" TargetType="TextBlock" BasedOn="{StaticResource {x:Type TextBlock}}">
      <Setter Property="IsHitTestVisible" Value="False" />
    </Style>
  </StackPanel.Resources>
  <TextBox Style="{StaticResource MaterialDesignFilledTextBox}" materialDesign:HintAssist.HelperTextStyle="{StaticResource CustomHelperTextStyle}"/>
  <Border Background="Red" Height="14" IsHitTestVisible="False"/>
</StackPanel>

That might "solve" your issue, but probably a somewhat fragile approach; that style is not applied to the character counter for example, and in case it is visible it would probably trigger the same issue when hovering that.

[sabuncumurat]

What I don't understand is how a Border affects the workings of a separate element, in this case a TextBox.
Is it because they have a common parent?
Thanks.

By the way, I tested the original question code, and yes, clicking on the red border causes the TextBox to receive focus.

[nicolaihenriksen]

@sabuncumurat Not entirely sure I have understood your last question correctly, but I'll answer what I think you're asking 😄

I think you're asking why the clicking the red Border (below the TextBox) affects the workings of the TextBox. That is actually not what is happening. As you can see from the original sample, the Border has IsHitTestVisible=False which means it does not handle the mouse click, and thus the element below it (i.e. the "FooterGrid" of the TextBox containing the helper text) will handle the event, and thus give focus to the TextBox.

The reason the "FooterGrid" draws outside the bounds of the TextBox, and thus effectively below the red Border, is because it is placed in a Canvas which has a height of 0, but does not have ClipToBounds=True (effectively allowing rendering outside the bounds of the Canvas). So there are some quirks to keep in mind when dealing with helper texts.

I think there is actually a bug there too, because the TextBlock for the helper text has an ActualHeight greater than 0 even when there isn't a helper text applied. That TextBlock should probably collapse to a height of 0 when it does not have any contents. That would probably also remove the issue which @Frillaut ran into (because I don't see a helper text applied in the original example). If it collapses, there wouldn't be any elements drawn below the red Border and thus nothing to capture the mouse click.

[sabuncumurat]

@nicolaihenriksen Thank you for taking the time to explain this, now it makes sense.
Regards.