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


#1

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


#2

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


#3

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


#4

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


#5

@vigorwebsolutions it does not seems to work ;(

have you another solution ?


#6

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


#7

yeh of course, I tried


#8

Do you have it running online somewhere to look at?


#9
     <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


#10

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


#11

thank’s. I ll get a look