CODEWITHSUNDEEP
reactjsdropdownmaterial-ui
kakaja
kakaja

Reputation: 734

How to open React MaterialUI dropdown on click?

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>

Upvotes: 1

Views: 1709

Answers (1)

Zan RAKOTO
Zan RAKOTO

Reputation: 911

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.

Upvotes: 3

Related Questions