Select - If number of elements exceeds window height there is no overflow handled

[xeinebiu]

Description

When the number of elements inside a Select component does exceed the window height, the overflow is hidden. I would expect at least a scrollbar to be shown so the user can scroll on the contents of the select (I assume same would happen with a Combobox)

Link to Reproduction (or Detailed Explanation)

Zip attached

Steps to Reproduce

import './styles.css';

import NiceModal from '@ebay/nice-modal-react';
import React, { FC, StrictMode } from 'react';
import * as ReactDOM from 'react-dom/client';

import { Select, Text } from './park';
import {GlobalToastProvider} from "./global-toast";
import { createListCollection } from '@ark-ui/react';


const Main: FC = () => {
    return (
        <StrictMode>
            <NiceModal.Provider>
                <Content/>
            </NiceModal.Provider>
            <GlobalToastProvider/>
        </StrictMode>
    );
};

const Content: FC = () => {
  const collection = createListCollection({
    items: [
      'React', 'Solid', 'Vue', 'Angular', 'Android', 'iOS', 'Flutter', 'AsyncTask', 'TypeScript',
      'JavaScript', 'Python', 'Java', 'C#', 'C++', 'Ruby', 'Kotlin', 'Swift', 'Node.js', 'Django',
      'Flask', 'Spring', 'Hibernate', 'Rust', 'Go', 'Scala', 'Perl', 'PHP', 'Laravel', 'Symfony',
      'Express.js', 'Next.js', 'Svelte', 'Backbone.js', 'Bootstrap', 'Tailwind CSS', 'Sass', 'Less',
      'PostgreSQL', 'MySQL', 'MongoDB', 'SQLite', 'Redis', 'GraphQL', 'Apollo', 'Prisma', 'Cassandra',
      'Docker', 'Kubernetes', 'Jenkins', 'GitLab', 'GitHub', 'Bitbucket', 'Terraform', 'Ansible',
      'Puppet', 'Chef', 'Vagrant', 'Elasticsearch', 'Logstash', 'Kibana', 'Prometheus', 'Grafana',
      'Babel', 'Webpack', 'Parcel', 'Gulp', 'Grunt', 'Vite', 'RxJS', 'Lodash', 'jQuery', 'D3.js',
      'Chart.js', 'Three.js', 'Pandas', 'NumPy', 'Matplotlib', 'Scikit-learn', 'TensorFlow', 'Keras',
      'PyTorch', 'FastAPI', 'Electron', 'Tauri', 'Capacitor', 'Ionic', 'Xamarin', 'Unity', 'Unreal Engine',
      'Godot', 'OpenGL', 'Vulkan', 'WebAssembly', 'Figma', 'Adobe XD', 'Sketch', 'Framer', 'Zeplin',
      'JIRA', 'Confluence', 'Trello', 'Slack', 'VSCode', 'IntelliJ IDEA', 'PyCharm', 'Eclipse', 'NetBeans'
    ]
  });

  return <Select.Root collection={collection}>
    <Select.Label>Framework</Select.Label>
    <Select.Control>
      <Select.Trigger>
        <Select.ValueText placeholder="Select a Framework" />
        <Select.Indicator>
          <Text>Toggle</Text>
        </Select.Indicator>
      </Select.Trigger>
      <Select.ClearTrigger>Clear</Select.ClearTrigger>
    </Select.Control>
      <Select.Positioner>
        <Select.Content>
          <Select.ItemGroup>
            <Select.ItemGroupLabel>Frameworks</Select.ItemGroupLabel>
            {collection.items.map((item) => (
              <Select.Item key={item} item={item}>
                <Select.ItemText>{item}</Select.ItemText>
                <Select.ItemIndicator>✓</Select.ItemIndicator>
              </Select.Item>
            ))}
          </Select.ItemGroup>
        </Select.Content>
      </Select.Positioner>
    <Select.HiddenSelect />
  </Select.Root>
};

const root = ReactDOM.createRoot(
    document.getElementById('root') as HTMLElement,
);
root.render(<Main/>);

Ark UI Version

4.1.0

Framework

• React
• Solid
• Vue

Browser

Chrome

Additional Information

Recording.2024-10-13.201418.mp4

Sample
apps.zip

For now, I have fixed it by extending the slot and applying this quick fix

    select: {
          base: {
            content: {
              // fix the height and scrolling https://github.com/chakra-ui/ark/issues/2982
              maxHeight: '16rem',
              overflow: 'auto'
            }
          }
        }

[segunadebayo]

This is not an Ark UI bug since it’s a headless solution.

You should include a max height in your styling code, or use the --available-height variable exposed by the Positioner

[Jonas-C]

@segunadebayo There's a bunch of scenarios in which this can occurr, including the ark examples. See for instance, Menu with Combobox, Combobox with TagsInput and Async Select.

I'm trying to place some text underneath some combobox items to indicate how many hits a search has. I imagined that I could use two max-heights (one on Content, one on an inner wrapper), but this breaks the combox scroll. Incidentally, this is the samme issue that's happening in the examples I listed above.

[segunadebayo]

You can solve this with one max height.

• Wrap the content around a div that has a maxHeight
• Using flexbox, align the content and the extra "HitCount" component
• Set the content to flex: 1, and add overflowBlock: auto

That's a rough idea around how to style this.

[Jonas-C]

I don't think I was clear in the error I reported. If you try using a keyboard when scrolling any of the examples I linked you'll see that it doesn't follow the tab descendant. Setting overflowBlock: auto on anything but ComboboxContent/SelectContent breaks scrolling entirely when using arrow keys. This more or less forces Select and Combobox content to either be entirely scrollable, or not scrollable at all.