Adding automatic scrolling on item focus for non-virtualized collections (#2232)

* moving useSelectableList scrolling code to useSelectableCollection

allows non virtualized tables/grids created with useTable/useGrid to have automatic scrolling when moving focus via arrow keys

* adding stories and fixing useSelectableCollection scroll behavior

some components will have a ref that is not the same element as the scrollable region so add a prop for scrollRef

* fixing lint

* fixing lint

* addressing review comments

* fixing lint and removing isVirtualized from tablist props

Author: LFDanLu

packages/@react-aria/combobox/docs/useComboBox.mdx

@@ -242,8 +242,7 @@ function Popover(props) {
     popoverRef = ref,
     isOpen,
     onClose,
-    children,
-    ...otherProps
+    children
   } = props;
 
   // Handle events that should cause the popup to close,
@@ -303,7 +302,9 @@ function ListBox(props) {
       style={{
         margin: 0,
         padding: 0,
-        listStyle: "none"
+        listStyle: "none",
+        maxHeight: "150px",
+        overflow: "auto"
       }}>
       {[...state.collection].map(item => (
         <Option

packages/@react-aria/combobox/src/useComboBox.ts

@@ -94,7 +94,9 @@ export function useComboBox<T>(props: AriaComboBoxProps<T>, state: ComboBoxState
     keyboardDelegate: delegate,
     disallowTypeAhead: true,
     disallowEmptySelection: true,
-    ref: inputRef
+    ref: inputRef,
+    // Prevent item scroll behavior from being applied here, should be handled in the user's Popover + ListBox component
+    isVirtualized: true
   });
 
   // For textfield specific keydown operations

packages/@react-aria/combobox/stories/example.tsx

@@ -0,0 +1,185 @@
+/*
+ * Copyright 2021 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {DismissButton, useOverlay} from '@react-aria/overlays';
+import {FocusScope} from '@react-aria/focus';
+import React from 'react';
+import {useButton} from '@react-aria/button';
+import {useComboBox} from '@react-aria/combobox';
+import {useComboBoxState} from '@react-stately/combobox';
+import {useFilter} from '@react-aria/i18n';
+import {useListBox, useOption} from '@react-aria/listbox';
+
+export function ComboBox(props) {
+  // Setup filter function and state.
+  let {contains} = useFilter({sensitivity: 'base'});
+  let state = useComboBoxState({...props, defaultFilter: contains});
+
+  // Setup refs and get props for child elements.
+  let buttonRef = React.useRef(null);
+  let inputRef = React.useRef(null);
+  let listBoxRef = React.useRef(null);
+  let popoverRef = React.useRef(null);
+
+  let {buttonProps: triggerProps, inputProps, listBoxProps, labelProps} = useComboBox(
+    {
+      ...props,
+      inputRef,
+      buttonRef,
+      listBoxRef,
+      popoverRef
+    },
+    state
+  );
+
+  // Call useButton to get props for the button element. Alternatively, you can
+  // pass the triggerProps to a separate Button component using useButton
+  // that you might already have in your component library.
+  let {buttonProps} = useButton(triggerProps, buttonRef);
+
+  return (
+    <div style={{display: 'inline-flex', flexDirection: 'column'}}>
+      <label {...labelProps}>{props.label}</label>
+      <div style={{position: 'relative', display: 'inline-block'}}>
+        <input
+          {...inputProps}
+          ref={inputRef}
+          style={{
+            height: 24,
+            boxSizing: 'border-box',
+            marginRight: 0,
+            fontSize: 16
+          }} />
+        <button
+          {...buttonProps}
+          ref={buttonRef}
+          style={{
+            height: 24,
+            marginLeft: 0
+          }}>
+          <span
+            aria-hidden="true"
+            style={{padding: '0 2px'}}>
+            ▼
+          </span>
+        </button>
+        {state.isOpen &&
+          <Popover popoverRef={popoverRef} isOpen={state.isOpen} onClose={state.close}>
+            <ListBox
+              {...listBoxProps}
+              listBoxRef={listBoxRef}
+              state={state} />
+          </Popover>
+        }
+      </div>
+    </div>
+  );
+}
+
+function Popover(props) {
+  let ref = React.useRef();
+  let {
+    popoverRef = ref,
+    isOpen,
+    onClose,
+    children
+  } = props;
+
+  // Handle events that should cause the popup to close,
+  // e.g. blur, clicking outside, or pressing the escape key.
+  let {overlayProps} = useOverlay({
+    isOpen,
+    onClose,
+    shouldCloseOnBlur: true,
+    isDismissable: true
+  }, popoverRef);
+
+  // Add a hidden <DismissButton> component at the end of the popover
+  // to allow screen reader users to dismiss the popup easily.
+  return (
+    <FocusScope restoreFocus>
+      <div
+        {...overlayProps}
+        ref={popoverRef}
+        style={{
+          position: 'absolute',
+          width: '100%',
+          border: '1px solid gray',
+          background: 'lightgray',
+          marginTop: 4
+        }}>
+        {children}
+        <DismissButton onDismiss={onClose} />
+      </div>
+    </FocusScope>
+  );
+}
+
+
+function ListBox(props) {
+  let ref = React.useRef();
+  let {listBoxRef = ref, state} = props;
+  let {listBoxProps} = useListBox(props, state, listBoxRef);
+
+  return (
+    <ul
+      {...listBoxProps}
+      ref={listBoxRef}
+      style={{
+        margin: 0,
+        padding: 0,
+        listStyle: 'none',
+        maxHeight: '150px',
+        overflow: 'auto'
+      }}>
+      {[...state.collection].map(item => (
+        <Option
+          key={item.key}
+          item={item}
+          state={state} />
+      ))}
+    </ul>
+  );
+}
+
+function Option({item, state}) {
+  let ref = React.useRef();
+  let {optionProps, isSelected, isFocused, isDisabled} = useOption({key: item.key}, state, ref);
+
+  let backgroundColor;
+  let color = 'black';
+
+  if (isSelected) {
+    backgroundColor = 'blueviolet';
+    color = 'white';
+  } else if (isFocused) {
+    backgroundColor = 'gray';
+  } else if (isDisabled) {
+    backgroundColor = 'transparent';
+    color = 'gray';
+  }
+
+  return (
+    <li
+      {...optionProps}
+      ref={ref}
+      style={{
+        background: backgroundColor,
+        color: color,
+        padding: '2px 5px',
+        outline: 'none',
+        cursor: 'pointer'
+      }}>
+      {item.rendered}
+    </li>
+  );
+}

packages/@react-aria/combobox/stories/useComboBox.stories.tsx

@@ -0,0 +1,35 @@
+/*
+ * Copyright 2021 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {ComboBox} from './example';
+import {Item} from '@react-stately/collections';
+import React from 'react';
+
+const meta = {
+  title: 'useComboBox'
+};
+
+export default meta;
+
+let lotsOfItems: any[] = [];
+for (let i = 0; i < 50; i++) {
+  lotsOfItems.push({name: 'Item ' + i});
+}
+
+const Template = () => () => (
+  <ComboBox label="Example" defaultItems={lotsOfItems}>
+    {(item: any) => <Item key={item.name}>{item.name}</Item>}
+  </ComboBox>
+);
+
+export const ScrollTesting = Template().bind({});
+ScrollTesting.args = {};

packages/@react-aria/grid/src/useGrid.ts

@@ -40,7 +40,11 @@ export interface GridProps extends DOMProps, AriaLabelingProps {
    * A function that returns the text that should be announced by assistive technology when a row is added or removed from selection.
    * @default (key) => state.collection.getItem(key)?.textValue
    */
-  getRowText?: (key: Key) => string
+  getRowText?: (key: Key) => string,
+  /**
+   * The ref attached to the scrollable body. Used to provided automatic scrolling on item focus for non-virtualized grids.
+   */
+  scrollRef?: RefObject<HTMLElement>
 }
 
 export interface GridAria {
@@ -60,7 +64,8 @@ export function useGrid<T>(props: GridProps, state: GridState<T, GridCollection<
     isVirtualized,
     keyboardDelegate,
     focusMode,
-    getRowText = (key) => state.collection.getItem(key)?.textValue
+    getRowText = (key) => state.collection.getItem(key)?.textValue,
+    scrollRef
   } = props;
   let formatMessage = useMessageFormatter(intlMessages);
 
@@ -83,7 +88,9 @@ export function useGrid<T>(props: GridProps, state: GridState<T, GridCollection<
   let {collectionProps} = useSelectableCollection({
     ref,
     selectionManager: state.selectionManager,
-    keyboardDelegate: delegate
+    keyboardDelegate: delegate,
+    isVirtualized,
+    scrollRef
   });
 
   let id = useId();

packages/@react-aria/select/docs/useSelect.mdx

@@ -128,10 +128,10 @@ In addition, see [useListBox](useListBox.html) for examples of sections (option
 options.
 
 ```tsx example export=true
-import {useSelectState} from '@react-stately/select';
+import {HiddenSelect, useSelect} from '@react-aria/select';
 import {Item} from '@react-stately/collections';
-import {useSelect, HiddenSelect} from '@react-aria/select';
 import {useButton} from '@react-aria/button';
+import {useSelectState} from '@react-stately/select';
 
 // Reuse the ListBox and Popover from your component library. See below for details.
 import {ListBox, Popover} from 'your-component-library';
@@ -194,6 +194,10 @@ function Select(props) {
   <Item>Green</Item>
   <Item>Blue</Item>
   <Item>Purple</Item>
+  <Item>Black</Item>
+  <Item>White</Item>
+  <Item>Lime</Item>
+  <Item>Fushsia</Item>
 </Select>
 ```
 
@@ -208,7 +212,7 @@ See [useOverlayTrigger](useOverlayTrigger.html) for more examples of popovers.
   <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show code</summary>
 
 ```tsx example export=true render=false
-import {useOverlay, DismissButton} from '@react-aria/overlays';
+import {DismissButton, useOverlay} from '@react-aria/overlays';
 import {FocusScope} from '@react-aria/focus';
 
 function Popover(props) {
@@ -217,8 +221,7 @@ function Popover(props) {
     popoverRef = ref,
     isOpen,
     onClose,
-    children,
-    ...otherProps
+    children
   } = props;
 
   // Handle events that should cause the popup to close,
@@ -245,7 +248,7 @@ function Popover(props) {
           marginTop: 4
         }}>
         {children}
-        <DismissButton onDismiss={() => state.close()} />
+        <DismissButton onDismiss={onClose} />
       </div>
     </FocusScope>
   );
@@ -278,7 +281,9 @@ function ListBox(props) {
       style={{
         margin: 0,
         padding: 0,
-        listStyle: "none"
+        listStyle: "none",
+        maxHeight: "150px",
+        overflow: "auto"
       }}>
       {[...state.collection].map(item => (
         <Option
@@ -287,7 +292,7 @@ function ListBox(props) {
           state={state} />
       ))}
     </ul>
-  )
+  );
 }
 
 function Option({item, state}) {