Best Practice to control height of <Dropdown/> & <ComboBox/> options list?

[Patchrik]

What is the best way to limit the height of a options list in a Dropdown or Combobox?

I currently have a combo box that will have over 1000 options and the list grows to take up the whole height of the container. So I have a list that covers the entire height of the screen. This isn't desirable, I was wondering what is the way that we are expected to solve this issue?

<Field
        label={label}
        validationMessage={errorMessage}
        required={(rules?.required as boolean) ?? false}
      >
        <Dropdown {...field} style={{ overflow: "hidden" }}
		// This doesn't do anything for the height, but it does change the background color?
		listbox={{ style: { height: "100px", backgroundColor: "lime" } }}
	    >
          {/* Below is my hack of just wrapping it in a div. Which works but doesn't feel like the right way to solve this. */}
          <div style={{ height: "100px", overflow: "auto" }}>
            {options?.map((option) => (
              <Option
                key={"value" in option ? option.value : option.id}
                value={"value" in option ? option.value : option.id}
              >
                {"label" in option ? option.label : option.name}
              </Option>
            ))}
          </div>
        </Dropdown>
</Field>

[pradeept95]

Hi @Patchrik ,

You can override listbox slot to change the popover behavior in Dropdown or ComboBox. Here is an example of how you can control maxHeight of listbox.

https://stackblitz.com/edit/3myzr1?file=src%2Fexample.tsx

import * as React from 'react';
import {
  Dropdown,
  makeStyles,
  Option,
  useId,
} from '@fluentui/react-components';
const useStyles = makeStyles({
  root: {
    // Stack the label above the field with a gap
    display: 'grid',
    gridTemplateRows: 'repeat(1fr)',
    justifyItems: 'start',
    gap: '2px',
    maxWidth: '400px',
  },

  listbox: {
    height: '100px',
  },
});

const options = [
  'Cat',
  'Caterpillar',
  'Corgi',
  'Chupacabra',
  'Dog',
  'Ferret',
  'Fish',
  'Fox',
  'Hamster',
  'Snake',
  'Option 1',
  'Option 2',
  'Option 3',
];

export const Default = () => {
  const dropdownId = useId('dropdown-default');

  const styles = useStyles();

  const dropdownOptions = React.useMemo(() => {
    {
      return options.map((option) => (
        <Option key={option} disabled={option === 'Ferret'}>
          {option}
        </Option>
      ));
    }
  }, [options]);

  return (
    <div className={styles.root}>
      <label id={dropdownId}>Best pet</label>
      <Dropdown
        aria-labelledby={dropdownId}
        placeholder="Select an animal"
        listbox={{
          className: styles.listbox,
          children: dropdownOptions,
        }}
      />
    </div>
  );
};

Thank you.