AvaloniaUI / Avalonia.Controls.ItemsRepeater

ItemsRepeater is a light-weight control to generate and present a collection of items.
MIT License
3 stars 1 forks source link

Keyboard navigation issues when using ItemsRepeater #23

Open StefanKoell opened 11 months ago

StefanKoell commented 11 months ago

Describe the bug

In the provided sample, I'm using an ItemsRepeater and a nested ItemsRepeater to create multiple toggle buttons. The sample also has 2 toggle buttons created in XAML directly. Tabbing through the items allows me to tab through the XAML generated toggle buttons until I reach the first toggle button created by the ItemsRepeater. I can't tab to the other items.

Some additional observations:

To Reproduce

A simple repro case can be found here: https://github.com/StefanKoell/Misc/tree/main/src/AvaTabKeyIssue

  1. Start the app
  2. Hit the tab keys to cycle through the items
  3. Note that I can't reach items beyond the first one in the items repeater.

Expected behavior

When tabbing through the UI, I expect that all controls (with IsTabStop set to true) show the white focus adorner to allow keyboard interaction. I would also expect to cycle through all the items and show the white focus adorner using the accelerator key when multiple identical keys are assigned.

Environment

michalczerwinski commented 4 months ago

I ran into the same issue, multiple buttons in IteamRepeater makes it impossible to focus other then first one with the keyboard. The workaround is executing:

KeyboardNavigation.SetTabNavigation(ItemRepeater, KeyboardNavigationMode.Continue);

in the parent control. The root cause is "KeyboardNavigation.SetTabNavigation(this, KeyboardNavigationMode.Once)" is called in ItemRepeater ctor.

@maxkatz6: Is this something you would accept the PR for? Looks like the simple one, but I don't know the local rules...

MSaqib-Rocket commented 1 month ago

<UserControl xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450" xmlns:vm="using:CrawlerProj.ViewModels" x:Class="CrawlerProj.Views.ProjectPageView" Background="WhiteSmoke" x:DataType="vm:ProjectPageViewModel">

    <UserControl.Resources>
            <ResourceDictionary>
                <ResourceDictionary.MergedDictionaries>
                    <Style Selector="Button.no-hover:pointerover">
                        <Setter Property="Background" Value="Transparent"/>
                        <Setter Property="BorderBrush" Value="Transparent"/>
                        <Setter Property="Template">
                            <ControlTemplate>
                                <ContentPresenter/>
                            </ControlTemplate>
                        </Setter>
                    </Style>
                </ResourceDictionary.MergedDictionaries>
            </ResourceDictionary>
    </UserControl.Resources>

<StackPanel Margin="20">
  <TextBlock FontFamily="Poppins" FontWeight="Bold" Margin="0 5">Projects</TextBlock>
  <ItemsRepeater  ItemsSource="{Binding domainList}" >
        <ItemsRepeater.ItemTemplate>
            <DataTemplate>
              <Border Background="White" Margin="0,10,0,0"
                  Padding="5">
                    <StackPanel Orientation="Vertical">
                      <TextBlock FontFamily="Poppins" Margin="5 5" FontWeight="Bold" Text="{Binding ProjectName}"/>
                      <!--<TextBlock Name="domainPath" Cursor="Hand" FontFamily="Poppins" Margin="5 5"  
                                  Text="{Binding Domain}"
                                  />-->
                        <Button x:Name="domainBtn" Classes="no-hover" Background="Transparent" BorderThickness="0" Cursor="Hand"
                                Command="{Binding DataContext.DomainClickCommand, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}"
                                CommandParameter="{Binding}">
                            <TextBlock FontFamily="Poppins" Margin="5 5" Text="{Binding Domain}" />
                        </Button>
                    </StackPanel>
              </Border>
            </DataTemplate>
        </ItemsRepeater.ItemTemplate>
    </ItemsRepeater>
</StackPanel>

Here is my user control. I want to get the text of the textblock which is inside the button on click function.

image

And here is the viewModel for the usercontrol.

MSaqib-Rocket commented 1 month ago

it is accepting the click but I want to get text at runtime

StefanKoell commented 1 month ago

Update from my side: I switched from ItemsRepeater to ItemsControl which resolves my particular issue with the tab key navigation. I don't want to close the issue because others are still having issues with the ItemsRepeater.