palantir/blueprint

Suggest: rightElement click

Open

#3,422 opened on Mar 15, 2019

View on GitHub
 (5 comments) (0 reactions) (0 assignees)TypeScript (20,263 stars) (2,167 forks)batch import
P3Package: selectType: bugType: questionhelp wanted

Description

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

Contributor guide

Tech stack
typescriptreactcss
Domain
frontend
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Familiarity with ReactUnderstanding of Blueprint's Suggest component
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70
Research direction
Examine the Suggest component's inputProps and how rightElement is rendered. Check if there is an existing prop to capture clicks on the right element or if the popover opens on input focus. Look at the codebase for similar implementations, e.g., how the input's left element handles clicks. Consider adding an onClick handler to the rightElement that triggers popover opening, possibly by exposing a method via ref or using popoverProps.onOpening.