React .14 warns <a> cannot be descendant of <a>

[TrySpace]

I'm nesting an IconMenu inside a ListItem:
Now both use EnhancedButton which generates an <a> tag around their children

iconButton = <IconButton>more</IconButton>
iconMenu = (  <IconMenu iconButtonElement={iconButton}>
                <MenuItem primaryText="Remove" onTouchTap={@removeItem} />
              </IconMenu>
)                  

<ListItem
   rightIconButton={iconMenu}>

</ListItem>

Which will give this warning:
cannot appear as a descendant of . See MessageItem > ListItem > EnhancedButton > a > ... > IconMenu > ReactTransitionGroup > Menu > MenuItem > ListItem > EnhancedButton > a

Because, I'm assuming the HTML spec does not allow this. Which is kind of logical, why would you put an anchor inside an anchor. But either it's the spec that is outdated, but moreover we are using html for things it was not meant for.

Now, I don't think there is any way around this warning, other than to not have the EnhancedButton have an anchor-tag around it.
Which wouldn't be bad if it's not using any href?

Maybe make it a span when linkButton === false ?

[chitopolo]

I'm trying to deal with the same issue, i hope to get an answer soon, or if you got it please let me know! ;) Best Regards.

[TrySpace]

"So I think the real issue is that we have no support for nested menus yet." Someone replied, but the comment is gone.

I agree, and we should use the EnhancedButton as a Menu/ListItem. Rather use the touchRipple from the button an add it to an item. Thus avoiding anchor-tags.

Nested / Composable Components would be the best solution here. But that's being worked on across the board, as I understand it.

[alitaheri]

Fixed in #2708