Searchable Select: scroll to selected item does not work

[lixiaoyan]

Provide a general summary of the issue here

If we have a searchable select with a long item list, it should scroll to the first selected item on open.

🤔 Expected Behavior?

Scroll to the first selected item.

😯 Current Behavior

It does not scroll.

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

https://stackblitz.com/edit/rac-searchable-select-scroll-into-view?file=src%2FSelect.tsx

Version

1.13.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

macOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[lixiaoyan]

It's weird that the searchable select example works well. 🤔

[lixiaoyan]

I used the same code as the example, but the scroll still doesn't work.

https://stackblitz.com/edit/rac-searchable-select-scroll-into-view?file=src%2FSelect.tsx

[lixiaoyan]

This issue seems to only reproducible in strict mode.
Edited: Not only in strict mode; resizing the window will also cause the scroll position to reset.

[lixiaoyan]

Found the cause of the problem.

---

Here we defined the scrollRef and attached it to the ListBox.

react-spectrum/packages/react-aria-components/src/Select.tsx

Line 195 in 3edd16b

let scrollRef = useRef(null);

react-spectrum/packages/react-aria-components/src/Select.tsx

Line 215 in 3edd16b

[ListBoxContext, {...menuProps, ref: scrollRef}],

---

Here we got the scrollRef.

react-spectrum/packages/@react-aria/overlays/src/useOverlayPosition.ts

Line 99 in 3edd16b

scrollRef = overlayRef,

---

Here we checked if scrollRef.current contains document.activeElement, which always returned false as document.activeElement is the <input> and is outside of the listbox.

react-spectrum/packages/@react-aria/overlays/src/useOverlayPosition.ts

Line 157 in 3edd16b

if (scrollRef.current && scrollRef.current.contains(document.activeElement)) {

---

Here we extended the maxHeight to a larger value, caused scroll position to change.

react-spectrum/packages/@react-aria/overlays/src/useOverlayPosition.ts

Line 178 in 3edd16b

overlay.style.maxHeight = (window.visualViewport?.height ?? window.innerHeight) + 'px';

---

Here we attempted to restore the scroll position, which failed since the anchor was not set.

react-spectrum/packages/@react-aria/overlays/src/useOverlayPosition.ts

Line 211 in 3edd16b

if (anchor && document.activeElement && scrollRef.current) {

---

After that, the scrollTop is reset to 0.

[lixiaoyan]

A possible approach is to check the virtual focus in useOverlayPosition.ts, however I am not sure if that is appropriate. WDYT @snowystinger?

[LFDanLu]

@lixiaoyan I think that might be a feasible approach, will probably have to make sure the element the scroll ref is attached to is also controlled by a input controlling virtual focus. Can probably check this by seeing if the active element has an aria-activeDescendant and if it does if the aria-activeDescendant is contained by the scrollRef, would you like to give this a shot?

[lixiaoyan]

@LFDanLu Unfortunately, that doesn't work. The input does not have the aria-activedescendant attribute set at the time the updatePosition function is called.