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.

[Patchrik]

Thank you for the answer. That's what I was looking for.

But this method doesn't seem to work with the ComboBox component. maxHeight doesn't work when using makeStyles for the listbox, I'm not exactly sure why. Seems the only way to get maxHeight to work is to wrap the options in a div with a maxHeight value. However if I need to set the height of the listbox to a consistent height using the listbox props and makeStyles works.