Search code examples
reactjsecmascript-6blueprintjs

blueprintjs Select Component onItemSelect Function Doesn't Run


I'm just trying to output text to the console when I click on a MenuItem in the dropdown menu. Can anyone spot what I'm doing wrong? There isn't much help on this topic besides the example component in the docs.

 itemRenderer(item) {
    return (
      <MenuItem
        key={item.id}
        label={item.year}
        text={item.season}
        shouldDismissPopover={true}
      />
    )
  }

  handleclick(item) {
    //this never runs :(
    console.log('clicked')
  }

  render() {
    return (
      <Select
        items={this.state.semesters}
        filterable={false}
        itemRenderer={this.itemRenderer}
        onItemSelect={this.handleclick}
      >
        <Button text={'Select a Semester'} rightIcon="caret-down" />
      </Select>
    )
  }

Solution

  • You should add a click handler on each MenuItem:

      itemRenderer(item, {handleClick}) {     // added {handleClick} argument
        return (
          <MenuItem
            key={item.id}
            label={item.year}
            text={item.season}
            onClick={handleClick}             // added this line
            shouldDismissPopover={true}
          />
        )
      }
    

    Check CodeSandbox demo: https://codesandbox.io/s/3rplzz746m (open the console)