Suggest: rightElement click

[lmvco]

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>
      </>
    );

[eleveurdechevres]

Hello,
I totally agree with you.
My problem is that I use Multiselect component and Suggest component for the same use.

• In one case, I need 1 element selected => Suggest
• In the other case I must be able to select several ones (tags) => Multiselect

The behaviour is not the same between the two objects :

• Multiselect : left icon clickable, rightElement (tagInputProps) clickable => like clicking on the inputText
• Suggest : left icon not clickable, rightElement (inputProps) clickable but not connected to default behaviour.

It would be nice to have an unified UX/UI behaviour between components which seem similar from the user.

Thanks

[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.

[eleveurdechevres]

Hello. Thank you for your answer.

I have tried :

const inputProps: InputGroupProps = {
    leftIcon: 'search',
    rightElement: 
        <Button
            icon='caret-down'
            className={style({ pointerEvents: 'none'})}
            minimal={true}
            intent={Intent.NONE}
        />,
    placeholder: 'Choose line...'
};

and also with

<Icon icon:'caret-down' className={style({ pointerEvents: 'none'})}/>

It does not work, the event is not passed through the Button/Icon
If it had worked, there would have been another problem : leftIcon has the same behaviour, and it is not accessible.

[romanr]

This is an important UX issue. You click into the field on rightElement and it does not respond. You have to move mouse into the space to the left of rightElement to click and put focus into input field. How annoying is that! This is a serious UX issue.
Is there a way to fix that?

[romanr]

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