MacCatalyst - Tabbing behaviour on a scrollable page of controls is inconsistent

[jdngray77]

Description

Relevant :
#14192
#14021

I have been yet unable to find a dynamic layout which correctly operates with keyboard navigation when combined with a ScrollView. I've tried BindableLayout on a VerticalStackLayout, CollectionView and ListView, and none are perfect.

My focus throughout this report is on MacCatalyst, but i mention Windows as a point of reference.

For context, the layout i'm working with is a page in my desktop application which contains a dynamic collection of controls, underneath of which is another non-dynamic collection of controls.

All is contained within a ScrollView as to make the page scrollable.

e.g

<ScrollView>
  <VerticalStackLayout>
              <CollectionView ItemsSource="{Binding ItemViewModels}">
                  ...
              </CollectionView>
          
              <Grid ColumnDefinitions="*,*">
                  <Entry Grid.Column="0"/>
                  <Entry Grid.Column="1"/>
              </Grid>
  </VerticalStackLayout>
</ScrollView>

I'm aiming for the user to be able to use simple keyboard navigation to navigate through the entire page of controls - a feat which should be relatively simple - but is proving to be rather difficult.

With that context, this is my experience :

Tabbing inside of a BindableLayout / VerticalLayout will not scroll to the next focusable control.

• Windows :
  Tab will focus on controls out of view, and will scroll the scrollview in order to achieve it (desired behaviour)

• MacCatalyst :
  Tab will only cycle through the controls that are already on screen, and will not scroll to focus on controls that are out of view.

When using BindableLayout on a VerticalStackLayout inside of a ScrollView, i.e

 <ScrollView>
        <VerticalStackLayout
            Padding="30,0"
            Spacing="100"
            BindableLayout.ItemsSource="{Binding ItemViewModels}">
...

Pressing Tab will only cycle between controls that are already visible on screen. If a focusable control is partially on screen, it will scroll to it - so the capability for tab to initiate a ScrollTo style scroll is possible, it just simply refuses if the next focusable control is entirely out of view.

I would expect Tab to behave the same as it does on windows, cycling between controls on the entire page and scrolling to the next focusable control when necessary.

Scrolling manually to bring the fields into view makes it possible to tab to them again.

This almost seems like a virtualisation issue, where the controls off-screen simply don't exist, but what is presumably the underlying Scroll View from UIKit doesn't seem to mention any such virtualisation

This is demonstrated in this reproduction which uses BindableLayout, or this reproduction which just uses a plain old VerticalStackLayout with nothing dynamic.

CollectionView (and ListView) will only scroll to focus controls within itself.

• Windows
  CollectionView is treated as a single control; Tab skips past the entire CollectionView.
• MacCatalyst
  Will scroll to focus controls within the collection view 👍 , but transitioning focus to controls below the CollectionView on the page is inconsistent.

CollectionView is notably better than BindableLayout in it's ability to scroll to the next focusable field, providing of course that the controls all reside within CollectionView. By pressing Tab i can scroll through the page successfully, until I reach the end of the CollectionView, and shift+tab will navigate in reverse up through the entire page. 👍

The problems with collection view's tabbing behaviour begin after reaching it's bottom.

Problem A

Once i reach the end of the CollectionView, the page exhibits the same behaviour mentioned previously of refusing to scroll to focus the controls in the Grid below the CollectionView.

Providing the grid below the CollectionView remains out of view after reaching the bottom of the collection, The user is required to manually scroll the grid into view to make tabbing to controls within it possible.

Problem B

Once the focus does transition from the CollectionView to the Grid of controls below, Tab can only cycle between the controls visible on screen again.

From here, Tab cannot cycle to the top of the page, only to the top of the controls visible on screen.

It also becomes impossible to use shift+tab to navigate back up to entire page. It only cycles through the controls on screen.

You're stuck navigating the controls present on-screen until you click on a control within the CollectionView, which re-enables the ability to shift+tab back through the page.

Collection View Repro
List View Repro

Visual Demo

See the window titles for the type of layout used in each window.

• Note how the first two windows fail to scroll unless the next control is at least partially visible.
• Note how the last two windows require for manual scrolling from the user.
• Note how after manually scrolling to reveal the grid & tabbing to it, shift+tab fails to scroll back up the page.

repro.mov

Steps to Reproduce

No response

Link to public reproduction project repository

https://github.com/jdngray77/maui-maccatalyst-tabbing

Version with bug

8.0.6 SR1

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

macOS

Affected platform versions

Sonoma 14.2.1 (23C71)

Did you find any workaround?

No

Relevant log output

Installed Workload Id      Manifest Version       Installation Source
---------------------------------------------------------------------
maui-tizen                 8.0.6/8.0.100          SDK 8.0.200        
maui-maccatalyst           8.0.6/8.0.100          SDK 8.0.200        
ios                        17.2.8022/8.0.100      SDK 8.0.200        
maccatalyst                17.2.8022/8.0.100      SDK 8.0.200        
android                    34.0.79/8.0.100        SDK 8.0.200        

[ninachen03]

Verified this issue with Visual Studio for mac 17.6.10 (build428), can repro it on Maccatalyst platform with sample project.