How do you increase the select menu content height?

Question

EDIT:

Sandbox: https://codesandbox.io/s/clever-leftpad-dkjh7?file=/index.js:0-1748

I am using React, evergreen-ui SelectMenu component.

The problem with using the component's titleView property is that, when the header height is tall, some select menu items are not rendered properly (hidden).

Supposedly in the image above, "hhhhhhh" should show but was hidden.

  public render() {
    const { children } = this.props;
    let options = [];
    options.push({ label: '00000000', value: '00000000' });
    options.push({ label: '11111111', value: '11111111' });
    options.push({ label: '22222222', value: '22222222' });
    options.push({ label: 'aaaaaaaa', value: 'aaaaaaaa' });
    options.push({ label: 'bbbbbbbb', value: 'bbbbbbbb' });
    options.push({ label: 'cccccccc', value: 'cccccccc' });
    options.push({ label: 'dddddddd', value: 'dddddddd' });
    options.push({ label: 'eeeeeeee', value: 'eeeeeeee' });
    options.push({ label: 'ffffffff', value: 'ffffffff' });
    options.push({ label: 'gggggggg', value: 'gggggggg' });
    options.push({ label: 'hhhhhhhh', value: 'hhhhhhhh' });

    return (
      <SelectMenu
        className={'someClassName'}
        filterPlaceholder={'Filter by name...'}
        isMultiSelect={true}
        titleView={this.getCustomTitleView}
        hasTitle={true}
        hasFilter={true}  
        options={...options}
        onSelect={this.onDeviceSelectHandler}
        onDeselect={this.onDeviceDeselectHandler}
      >
        {children}
      </SelectMenu>
    );
  }

  private getCustomTitleView() {
    return (
      <Pane
        display="flex"
        flexDirection="column"
        borderBottom="default"
        padding={8}
        boxSizing="border-box"
      >
        <Heading size={400}>{this.props.title}</Heading>
        <Pane marginTop={5}>
          <Button width={'100%'} justifyContent="center">
            Clear all selections
          </Button>
        </Pane>
      </Pane>
    );
  }

I've tried adding a className property to the component to use the following CSS (see below) hoping that it would dynamically increase the height to this but so far it wouldn't work.

.someClassName:nth-of-type(1) {
  height: 285px;
}

Manually adding it via console works however:

Answer 1

Turns out, instead of the height property as mentioned in the documentation,

minHeight was the right property to set to also increase the SelectMenuContent.

<SelectMenu
   minHeight={282}
   ...
>
...
</SelectMenu>