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.

score 5 · Accepted Answer · answered Dec 05 '18 at 12:44

5

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.

answered Dec 05 '18 at 12:44

user838494

469
4
19

Thanks for the answer and sorry for the long delay. I will check and keep you informed. – Ygo Mar 03 '19 at 18:40
Many thanks. It was the correct answer. Just one thing, it's 'blueprint-select.css', but you gave me a very strong hint ;) – Ygo Mar 03 '19 at 18:51
Glad to hear I could help. I have ran into a similar issue before, so I had an inclination to what the problem might be. – user838494 Mar 04 '19 at 19:21

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

0

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.

edited Jun 20 '20 at 09:12

Community

1
1

answered Nov 01 '18 at 15:05

Michael Wu

1,177
1
13
34

Thanks for the answer. I use an itemListRenderer. I think the way to resolve is with the CSS, as user5661402 mentioned. Anyway, I'll post as soon as I test – Ygo Mar 03 '19 at 18:42

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

2 Answers2