Blueprint: Blueprint Select does not render

[ashishsantikari]

Environment

• __Package version(s)__: @blueprint/[email protected], @blueprint/[email protected]
• __Browser and OS versions__: MS Edge v84.0.522.63

Question

Here is a simple example where I am trying to use the select component.
Unfortunately, it does not render on the container somehow. Can someone suggest, what am I doing wrong?

https://stackblitz.com/edit/react-ts-wtrh5h?file=index.tsx

[adidahiya]

Are you sure the CSS is getting loaded onto the page correctly? I'm not sure what kind of module loaders your stackblitz environment is configured with, so I don't know if your style.css imports are working correctly. At least it looks like Blueprint's default global styles (like typography) are _not_ being applied to the page, so that suggests a CSS loading issue.

[ptboyer]

@ashishsantikari I was stuck on this problem too.

Turns out that you need to pass a child to the Select component, like a Button, which will be the target of the popover which (when triggered) will then show your items.

The component's children will be wrapped in a Popover that contains the list and an optional InputGroup to filter it.

We both must've missed it, and I'm sure many others too, as I was expecting the component to work similarly to a MultiSelect where you don't need to pass any additional children, it just starts working...

Even in their example they use (below) as a child:

<Button text={Films.items[0].title} rightIcon="double-caret-vertical" />

Also, as @adidahiya suggested, ensure you're importing the select styles too.

import "@blueprintjs/select/lib/css/blueprint-select.css";