Skip to content

Commit 4716c76

Browse files
committed
fix(layout): Fixed scrollIntoView behavior for the layout tree
1 parent 80c22ba commit 4716c76

File tree

1 file changed

+29
-3
lines changed

1 file changed

+29
-3
lines changed

packages/tree/src/useTreeMovement.ts

+29-3
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,24 @@ interface ReturnValue {
9191
handleKeyDown: KeyboardEventHandler<ListElement>;
9292
}
9393

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+
94112
/**
95113
* This hook handles all the complex and "fun" stuff for selecting keyboard
96114
* accessibility within a tree and enabling keyboard movement, selection, and
@@ -156,9 +174,17 @@ export function useTreeMovement({
156174
onChange(data) {
157175
const { index, target, query } = data;
158176
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.
159180
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);
162188
}
163189

164190
if (!multiSelect) {
@@ -372,7 +398,7 @@ export function useTreeMovement({
372398

373399
const currentItem = itemIdRefs[visibleItems[index]?.itemId]?.ref.current;
374400
if (currentItem && isKeyboard) {
375-
scrollIntoView(event.currentTarget, currentItem);
401+
scrollIntoView(getScrollContainer(event.currentTarget), currentItem);
376402
}
377403
setFocusedIndex(index);
378404
},

0 commit comments

Comments
 (0)