Suggest: rightElement click

Environment

• Package version(s): blueprintjs/select 3.7.0
• Browser and OS versions: Chrome 72 in Windows 10

Question

Hi,

I am uisng a Suggest component with a right icon. I passed a rightElement prop to the input in order to add an icon in the right side of it. However, clicking in this icon, nothing happens. How can I easily avoid that the icon catches the click button letting the input handle that event (and achieve the same experience of clicking in the other parts of the input) ? I could do it controlling manually when the popover is expanded or not but I would like to avoid that.

   const ColorSuggest = Suggest.ofType<IColor>();

    const icon = <Icon icon="chevron-down" onClick={this.onArrowClick} />;
    return (
      <>
      <ColorSuggest
        items={this.state.colors}
        itemPredicate={filterColor}
        itemRenderer={renderColor}
        onItemSelect={(color: IColor) => {console.log("On item select. Name = " + color.name);}}
        inputValueRenderer={this.renderInputValue}
        popoverProps={{minimal: true}}
        inputProps={{placeholder:"Search", className:"dropdown", rightElement: icon}}
      >        
      </ColorSuggest>
      </>
    );

[adidahiya]

You can apply the CSS pointer-events: none to the icon to make hover / click events pass through to the input below. Let me know if that works out, and we can consider adding this advice to the documentation.

[romanr]

This should be classified a bug. You click on input field and it does not receive focus. How is this not a bug?