BlueprintJS : SUGGEST => How to limit the row number on the popover?

Question

How to limit the displayed row number (add a scollbar) in the popOver with the "Suggest" component of BluePrintJS ?

<Suggest
    items={this.state.Plats}
    activeItem={this.state.activePlat}
    onActiveItemChange={this.handleActiveItemChange}
    itemRenderer={renderPlat}
    itemPredicate={filterFilm}
    onItemSelect={this.handleClick}
    noResults={<MenuItem disabled={true} text="Pas de résultat." />}
    inputValueRenderer={this.renderValue}
    popoverProps={{minimal: true, usePortal: true}}
/>

const filterFilm: ItemPredicate<IPlat> = (query, plat) => {
    const text = `${plat.Nom}`;
     return text.toLocaleLowerCase().indexOf(query.toLowerCase()) >= 0;
};

const renderPlat: ItemRenderer<IPlat> = (Plat, { handleClick, modifiers}) => 
{
  if (!modifiers.matchesPredicate){
    return null;
  }
  const text = `${Plat.Key}. ${Plat.Nom}`;
  return <MenuItem 
    key={Plat.Key} 
    active={modifiers.active}
    disabled={modifiers.disabled}
    label={Plat.Categorie}
    onClick={handleClick} 
    text={text} />;
};

Here is my result

I'd like to limit the list to 10 items, as in the example on the site, but everything I tried didn't work.

Thanks for any advice or help.

Answer 1

The image you've displayed isn't the normal style for a Suggest component. Are you including the Suggest CSS file? Make sure that is added because that will limit the height of the popover and make the content scrollable rather than a huge list across the entire height of the page.