1

I use material-ui components in react with react-router. I have a problem when I want to display list-items that are supposed to work as link elements, but also contain a submenu inside that should not trigger the parent link. It does and I don't know how to disable it.

var iconMenu =
    <IconMenu iconButtonElement={<IconButton><MoreVertIcon /></IconButton>}>
      <MenuItem primaryText='change name' onTouchTap={this.edit}/>
      <MenuItem primaryText='delete' onTouchTap={this.delete} />
    </IconMenu>


<ListItem
          key={i}
          containerElement={<Link to={`/items/${item.id}`} />}
          rightIconButton={iconMenu}
/>

When I click the iconMenu button, I do not want the <Link to={`/items/${item.id}`} /> to be triggered, so that I stay in the page. But it does. So how can I fix this problem? I tried to add event handler to run stopPropagation() but it was not successful...

Thanks!

Emo
  • 580
  • 1
  • 8
  • 27
  • 2
    Do you have to use a ``? Maybe, as a workaround, you could use a function called when ListItem onTouchTap is activated and [navigate programatically using React Router](http://stackoverflow.com/questions/31079081/programmatically-navigate-using-react-router) – César Landesa Nov 02 '16 at 15:58
  • @CésarLandesa Not really. But we were using that before and that causes some other associated problems... – Emo Nov 02 '16 at 16:10

2 Answers2

3

For React Router v4, add

onTouchTap={() => this.props.history.push(`/items/${item.id}`)}

to the ListItem, instead of containerElement.

Use import { withRouter } from 'react-router-dom' and export default withRouter(Foo) to add history to the component's props.

Alf Eaton
  • 5,226
  • 4
  • 45
  • 50
1

First of all, I'd like to admit that I do not like material-ui and thus do not recommend it to people who consider starting a project with it. The reasoning behind is that you sacrifice too much time customising the components to your needs - a solution that is opposite to the idea of React. It also uses inline styles that you always have to overwrite in the component file, not in your scss or less. This sucks big time. I don't even mention all the UI interaction actions that are handled with JS that could make your performance ache.

Another short mention is to the react-router. Unfortunately I'm not a fan of it either. Guys, why do you change the API in every next release? Why is it so damn difficult to just reset the location queries? Just look at FlowRouter and see how fantastic a route API should be implemented.

Anyways, my solution was to implement a wrapper around the <Link /> component and move the <IconMenu /> outside of the <Link /> wrapper:

<li key={i}>
  <ListItem
          key={i}
          containerElement={<Link to={`/items/${item.id}`} />}
  />
  {iconMenu}
</li>
Community
  • 1
  • 1
Emo
  • 580
  • 1
  • 8
  • 27
  • 1
    `why do you change the API in every next release?` Welcome to the JS world. – JohnnyQ Feb 01 '17 at 03:16
  • What are the alternatives for material-ui then? Requirement: Library should be component rich and there should be uniformity in the component design – Pavan Jul 19 '17 at 08:26
  • 3
    @chenop For material-ui v1.0, instead of referencing a component with `containerElement`, you should use: `component={Link} to={\`/items/${item.id}\`}`. See: https://material-ui-1dab0.firebaseapp.com/component-demos/buttons – jami0821 Aug 16 '17 at 22:42