marigold-ui/marigold

Select does not scroll with keyboard input

benediktgrether opened this issue · 0 comments

Description

We have limited the height of the select so that there are no issues if the select does not have enough space above or below. Now the select is no longer scrolled when the keyboard focus is inside the selected.

How to reproduce

Steps to reproduce the behavior:

  1. Add following code into Selected Stories
export const SelectedScroll = () => {
  return (
    <Select disabledKeys={['Firefly']}>
      <Select.Option key="Harry Potter">Harry Potter</Select.Option>
      <Select.Option key="Lord of the Rings">Lord of the Rings</Select.Option>
      <Select.Option key="Star Wars">Star Wars</Select.Option>
      <Select.Option key="Star Trek">Star Trek</Select.Option>
      <Select.Option key="Firefly-1">Firefly</Select.Option>
      <Select.Option key="Firefly-2">Firefly</Select.Option>
      <Select.Option key="Firefly-3">Firefly</Select.Option>
      <Select.Option key="Firefly-4">Firefly</Select.Option>
      <Select.Option key="Firefly-5">Firefly</Select.Option>
      <Select.Option key="Firefly-6">Firefly</Select.Option>
      <Select.Option key="Firefly-7">Firefly</Select.Option>
      <Select.Option key="Firefly-8">Firefly</Select.Option>
      <Select.Option key="Firefly-9">Firefly</Select.Option>
      <Select.Option key="Firefly-10">Firefly</Select.Option>
      <Select.Option key="Firefly-11">Firefly</Select.Option>
      <Select.Option key="Firefly-12">Firefly</Select.Option>
      <Select.Option key="Firefly-13">Firefly</Select.Option>
      <Select.Option key="Firefly-14">Firefly</Select.Option>
      <Select.Option key="Firefly-15">Firefly</Select.Option>
      <Select.Option key="Firefly-16">Firefly</Select.Option>
      <Select.Option key="Firefly-17">Firefly</Select.Option>
      <Select.Option key="Firefly-18">Firefly</Select.Option>
      <Select.Option key="Firefly-19">Firefly</Select.Option>
      <Select.Option key="Firefly-20">Firefly</Select.Option>
      <Select.Option key="Firefly-21">Firefly</Select.Option>
    </Select>
  );
};
  1. Got to Storybook Selected and Selected Scroll.
  2. Go with the Keyboard into the Selected.
  3. Try to go down with your arrow keys.
  4. Selected doesn't scroll with the arrow keys.

Expected behavior

The select should scroll with the arrow keys when the next element is no longer in the viewport and bring it to the top.
You can test it here. https://react-spectrum.adobe.com/react-aria/useSelect.html#asynchronous-loading