How to open React MaterialUI dropdown on click?

Question

I have a Material UI dropdown component and a label. How to open this dropdown clicking the label?

<label>Dash style</label>
<DropDownMenu
    value={this.props.seriesOptions.dashStyle}
    onChange={this.handleDashChange} >
    <MenuItem key={1} value={"Solid"} label="Solid" primaryText="Solid" />
    <MenuItem key={2} value={"ShortDash"} label="ShortDash" primaryText="ShortDash" />
    <MenuItem key={3} value={"ShortDot"} label="ShortDot" primaryText="ShortDot" />
</DropDownMenu>

You're talking about the default behavior. Did you import react-tap-event-plugin? — Lee Han Kyeol
– Lee Han Kyeol, Commented May 16, 2017 at 9:30
@LeeHanKyeol, No. How can it help me? Is there a onClick attribute that I need to add to the label? — kakaja
– kakaja, Commented May 16, 2017 at 10:02

Zan RAKOTO · Accepted Answer · 2017-05-16 12:22:33Z

3

As I know, the DropDownMenu component don't have a property that let you control his state. However, you can use Popover with Menu component to do this.

You can write something like

        <label onClick={(event) => {
          this.setState({
            open: true,
            anchorEl: event.currentTarget,
          });
        }}>Dash style</label>
        <Popover
          open={this.state.open}
          anchorEl={this.state.anchorEl}
          anchorOrigin={{horizontal: 'left', vertical: 'bottom'}}
          targetOrigin={{horizontal: 'left', vertical: 'top'}}
          onRequestClose={this.handleRequestClose}
          animation={PopoverAnimationVertical}
        >
          <Menu
            value={this.state.dashStyle}
            onChange={this.handleDashChange.bind(this)}
          >
            <MenuItem key={1} value="Solid" primaryText="Solid"/>
            <MenuItem key={2} value="ShortDash" primaryText="ShortDash"/>
            <MenuItem key={3} value="ShortDot" primaryText="ShortDot"/>
          </Menu>
        </Popover>

with these two components.

Hope this help.

answered May 16, 2017 at 12:22

Zan RAKOTO

9119 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kakaja Over a year ago

Thank you. I used for now another workaround: absolutely positioned dropdown with a padding going over the label, so that the user has impression to click the label but actually it is the dropdown itself that is clicked.

Collectives™ on Stack Overflow

How to open React MaterialUI dropdown on click?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related