[Bug]: 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

• [X] React
• [ ] Solid
• [ ] Vue

Browser

Chrome

Additional Information

https://github.com/user-attachments/assets/a1778c0c-3d0c-4359-b80c-86253f173978

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'
            }
          }
        }