Material-ui TextField as /inside MenuItem , is it possible?

Hi,

I try to put a Material-ui TextField as child of (inside) a Material-ui Menu item; here is my code

const ListExampleFolder = React.createClass({

  removethisfrequence(){

    Frequences.remove(this.props.frequence._id);
  },

  render() {

    return (

  <div style={styles.frequences}>
    <List subheader="Folders" insetSubheader={true}>
      <ListItem
        leftAvatar={<Avatar icon={<FileFolder />} />}
        rightIcon={
              <div>
               <IconMenu
                  iconButtonElement={<IconButton><MoreVertIcon /></IconButton>}
                  anchorOrigin={{horizontal: 'left', vertical: 'top'}}
                  targetOrigin={{horizontal: 'left', vertical: 'top'}}
                >
                  <MenuItem primaryText="remove" onClick={this.removethisfrequence} />
                  <MenuItem>
                       <form onClick={(e)=>{this.refs.textInpute.focus();}}>
                         <TextField
                          hintText="what's up"  ref="textInpute" />
                        </form>

                     </MenuItem>
                </IconMenu>
                  <Badge
                  badgeContent={4}
                  primary={true}
                  badgeStyle={{top: '-100%', right: '100%'}}
                >
                </Badge>
              </div>

               }
         
       // {this.renderTasks()}  
        primaryText={this.props.frequence.text}
        secondaryText="child, school, ..."/>
      <Divider inset={true} />

    </List>
  </div>


    );
  }
});

export default ListExampleFolder;

All is well except that every time I click on the MenuItem, the menu closes; suddenly I have not the chance to write in the iTextField something to send it.

Is there a way to stop the redirection of Menu item (menu closing) when one click on it; so I can write in the form TextField and send it ?

Thank’s for your help

e.preventDefault(); and e.stopPropagation(); are your friends when trying to intercept events that are attached to elements you are working with.

@vigorwebsolutions I guess e.preventDefault() should be atteched to MenuItem element ??

I think putting it in your onClick function is what you need to do…

@vigorwebsolutions it does not seems to work ;(

have you another solution ?

Did you try the e.stopPropagation() inside your onClick function?

yeh of course, I tried

Do you have it running online somewhere to look at?

     <MenuItem>
               <form onClick={(e)=>{e.stopPropagation();}}>
                 <TextField
                  hintText="what's up"  ref="textInpute" />
                </form>

             </MenuItem>

but even with that, the Menu closes when one click on it

Ah, my bad, skipped past the react stuff – you may want to have a look here: https://github.com/erikras/react-native-listener

thank’s. I ll get a look

can you share the code: i also got the same issue…

Generally speaking, you can just place the TextField between the MenuItem tags (and make of course some other changes) and it works.

Fragment of PoC:

<MenuItem>
   <TextField
          id="standard-full-width"
          style={{ margin: 8 }}
          label="Other Option"
          placeholder="Placeholder"
          fullWidth
          margin="normal"
          InputLabelProps={{
            shrink: true,
          }}
        />
        </MenuItem>