MaterialDesignInXamlToolkit icon indicating copy to clipboard operation
MaterialDesignInXamlToolkit copied to clipboard

Expander content is not focusable anymore

Open chrizzz86 opened this issue 2 years ago • 8 comments

Bug explanation

Due to setting Focusable="False" for ContentPresenter inside Grid "ContentPanel" it's not possible anymore to set focus on content controls

Version

4.6.0.0 prerelease

chrizzz86 avatar Jul 16 '22 19:07 chrizzz86

Indeed, it's problematic...

ElieTaillard avatar Jul 20 '22 10:07 ElieTaillard

I just tried the following

<Expander HorizontalAlignment="Stretch" Header="Expander Example 1a">
  <Button Content="Hello"></Button>
</Expander>

When I set Focusable=True this adds a tab stop to the content presenter:

  1. ToggleButton (in Header)
  2. ContentPresenter 🆕
  3. Button "Hello"

(Unfortunately KeyboardNavigation.IsTabStop="False" does not work here for me)

Why do you need to focus the ContentPresenter? The button/content can still be focused.

greuelpirat avatar Apr 16 '23 16:04 greuelpirat

In my case I had a TextBox inside the Expander control. The focus was set automatically by DataTrigger when control expands. This was working properly in previous versions.

From version 4.6 there is a new setting Focusable="False" for the ContentPresenter Name="PART_Content" inside the ControlTemplate. I guess based on this change it is not working anymore.

chrizzz86 avatar Apr 16 '23 18:04 chrizzz86

@chrizzz86 can you provide additional feedback on your setup. I wrote a UI test to try and reproduce the problem but I am unable to.

Keboo avatar Apr 19 '23 05:04 Keboo

Hi, yes, for sure...

<Expander ExpandDirection="Left"
                  DataContext="{Binding SearchViewModel}"
                  IsExpanded="{Binding IsExpanded, Mode=TwoWay}"
                  Style="{StaticResource MaterialDesignExpander}"
                  VerticalAlignment="Stretch"
                  HorizontalAlignment="Right">

            <Expander.Header>
                <TextBlock
                    Text="{x:Static loc:Controls.Search}"
                    RenderTransformOrigin=".5,.5">
                    <TextBlock.LayoutTransform>
                        <RotateTransform Angle="90" />
                    </TextBlock.LayoutTransform>
                </TextBlock>
            </Expander.Header>

            <GroupBox Margin="5"
                      Style="{StaticResource MaterialDesignCardGroupBox}">

                <GroupBox.Header>
                    <StackPanel Orientation="Horizontal">
                        <ContentPresenter Content="{StaticResource EventSearchWhite}" />
                        <TextBlock Text="{x:Static loc:Controls.SearchTooltip}"
                               Margin="3,0,0,0"
                               Foreground="White" />
                    </StackPanel>
                </GroupBox.Header>

                <DockPanel>

                    <TextBox DockPanel.Dock="Top"
                             GotFocus="TextBoxGotFocus"
                             Margin="5"
                             materialDesign:TextFieldAssist.HasClearButton="True"
                             materialDesign:HintAssist.Hint="{x:Static loc:Controls.FilterHint}"
                             VerticalAlignment="Center"
                             Text="{Binding Filter, UpdateSourceTrigger=PropertyChanged, Delay=200}">

                        <TextBox.InputBindings>
                            <KeyBinding Command="{Binding SelectCurrentItemAndCloseCommand}"
                                        Key="Return" />
                        </TextBox.InputBindings>

                        <TextBox.Style>
                            <Style TargetType="TextBox"
                                BasedOn="{StaticResource MaterialDesignOutlinedTextBox }">
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding IsExpanded}" Value="True">
                                        <Setter Property="FocusManager.FocusedElement" Value="{Binding RelativeSource={RelativeSource Self}}" />
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </TextBox.Style>

                    </TextBox>
                    
                    ...AND SOMETHING MORE...

                </DockPanel>

            </GroupBox>

        </Expander>

chrizzz86 avatar Apr 21 '23 18:04 chrizzz86

Great, I reproduced your issue (needed some changes for DataContext etc...)

But even if I set Focusable="True" on the ContentPresenter PART_Content the focus when expanding does not work:

expander-focus

To be honest: I expected this, but I can not explain why this worked before. I will try make some additional tests. But I would recommend to keep Focusable=False due to the keyboard navigation behaviour.

greuelpirat avatar Apr 22 '23 08:04 greuelpirat

the focus works when changes from 0c8779003b9a497efd3b73a7b013742e42f015b3 are reverted:

expander-focused

The focus does not work anymore because the Expander-content is collapsed when FocusManager is called. I think #2579 is still a good change.

To make it work again, the focus must be delayed. The fasted way I found is to use an event handler to queue the focus with priority Loaded:

<Expander Expanded="OnExpanded" ...>
  <TextBox x:Name="TextBoxToFocus" ...>
</Expander>
private void OnExpanded(object sender, RoutedEventArgs e)
{
  Dispatcher.InvokeAsync(TextBoxToFocus.Focus, DispatcherPriority.Loaded);
}

greuelpirat avatar Apr 23 '23 15:04 greuelpirat

This issue is marked stale because it has been open 30 days with no activity. Remove stale label or update the issue, otherwise it will be closed in 14 days.

github-actions[bot] avatar May 24 '23 01:05 github-actions[bot]