Setting the number of elements in blueprintjs Suggest element

Question

I'm working on a react app using the blueprintjs visual toolkit. The problem is, however, that unlike the example shown in the documentation, my <Suggest> box will display all the elements from the array as opposed to first 10. My current code:

                        <Suggest
                        items={this.props.documentTypes}
                        itemRenderer={(items, meta) => {
                            if (meta.modifiers.matchesPredicate) {
                                return (
                                    <MenuItem
                                        label={items[1]}
                                        key={items[0]}
                                        text={items[1]}
                                        onClick={meta.handleClick}
                                    />
                                );
                            } else {
                                return null;
                            }
                        }}
                        itemPredicate={(query, item) => {
                            let result =
                                `${item[0].toLowerCase()} ${item[1].toLowerCase()}`.indexOf(
                                    query.toLowerCase()
                                ) >= 0;
                            return result;
                        }}
                        inputValueRenderer={item => item[1]}
                        noResults={
                            <MenuItem
                                disabled={true}
                                text="No document types found."
                            />
                        }
                        onItemSelect={this.changeDocType}
                        popoverProps={{ popoverClassName: Classes.MINIMAL }}
                    />

Is there a way to specify how many elements are shown? I'm unable to find this setting in the documentation.

Answer 1

I think you could use itemListPredicate instead of itemPredicate. And then use .filter() and .slice(). Something like this...

<Suggest
  itemListPredicate={(query, items) => {
    return items.filter((item) => `${item[0].toLowerCase()} ${item[1].toLowerCase()}`.indexOf(query.toLowerCase()) >= 0).slice(0, 10)
  }}
/>