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.

Answer 2

You should use the itemListRenderer prop. From the docs:

ItemListRenderer Custom renderer for the contents of the dropdown.

The default implementation invokes itemRenderer for each item that passes the predicate and wraps them all in a Menu element. If the query is empty then initialContent is returned, and if there are no items that match the predicate then noResults is returned. Inherited from IListItemsProps.itemListRenderer

You can customize the prop with your own renderer function. In your case, you can probably lift the default renderer code and add a line where you limit the number of items to X.