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


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({



  render() {

    return (

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

                  badgeStyle={{top: '-100%', right: '100%'}}

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



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?

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


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:

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:

          style={{ margin: 8 }}
          label="Other Option"
            shrink: true,