@@ -91,6 +91,24 @@ interface ReturnValue {
91
91
handleKeyDown : KeyboardEventHandler < ListElement > ;
92
92
}
93
93
94
+ /**
95
+ * This is a temporary workaround for allowing the navigation tree to scroll
96
+ * correctly with keyboard movement since it manually sets the `overflow:
97
+ * visible` which prevents scrolling. I'll need to think of a better way to
98
+ * find/get the scrollable element (if any). It might also just go into the
99
+ * `scrollIntoView` util.
100
+ *
101
+ * @since 2.5.3
102
+ * @private
103
+ */
104
+ const getScrollContainer = ( target : HTMLElement ) : HTMLElement | null => {
105
+ if ( target . classList . contains ( "rmd-layout-tree" ) ) {
106
+ return target . parentElement ;
107
+ }
108
+
109
+ return target ;
110
+ } ;
111
+
94
112
/**
95
113
* This hook handles all the complex and "fun" stuff for selecting keyboard
96
114
* accessibility within a tree and enabling keyboard movement, selection, and
@@ -156,9 +174,17 @@ export function useTreeMovement({
156
174
onChange ( data ) {
157
175
const { index, target, query } = data ;
158
176
const { itemId } = visibleItems [ index ] ;
177
+ // Note: have to do a custom `scrollIntoView` here instead of relying on
178
+ // the `useActiveDescendantMovement`'s `scrollIntoView` because of how the
179
+ // tree renders with the ref behavior.
159
180
const item = itemIdRefs [ itemId ] . ref . current ;
160
- if ( item && target && target . scrollHeight > target . offsetHeight ) {
161
- scrollIntoView ( target , item ) ;
181
+ const container = getScrollContainer ( target ) ;
182
+ if (
183
+ item &&
184
+ container &&
185
+ container . scrollHeight > container . offsetHeight
186
+ ) {
187
+ scrollIntoView ( container , item ) ;
162
188
}
163
189
164
190
if ( ! multiSelect ) {
@@ -372,7 +398,7 @@ export function useTreeMovement({
372
398
373
399
const currentItem = itemIdRefs [ visibleItems [ index ] ?. itemId ] ?. ref . current ;
374
400
if ( currentItem && isKeyboard ) {
375
- scrollIntoView ( event . currentTarget , currentItem ) ;
401
+ scrollIntoView ( getScrollContainer ( event . currentTarget ) , currentItem ) ;
376
402
}
377
403
setFocusedIndex ( index ) ;
378
404
} ,
0 commit comments