Menu Item rendering as <div> and not <a> resulting in no animations.

[dropbeardan]

Steps

Imported CSS at root app.js file:

import 'semantic-ui-css/semantic.min.css';

(also tried to import it directly via CDN into the HTML template header, same result).

Attempted to compile:

import React from 'react';
import { Menu, Segment } from 'semantic-ui-react';

export default class FullMenu extends React.Component {
render() {
        return (
            <nav>
                <Menu>
                    <Menu.Item name='home'>Home</Menu.Item>
                    <a className="item">Editorials</a>
                </Menu>
            </nav>
        );
    };
}

Expected Result

<nav>
  <div class="ui menu">
    <a class="item">Home</a>
    <a class="item">Editorials</a>
  </div>
</nav>

Both the Home and the Editorials are responsive and have CSS animations/transitions when hovering.

Actual Result

<nav>
  <div class="ui menu">
    <div class="item">Home</div>
    <a class="item">Editorials</a>
  </div>
</nav>

Only the Editorials is responsive and has CSS animations/transitions when hovering.

Version

Currently using:

"semantic-ui-css": "^2.2.12"
"semantic-ui-react": "^0.76.0"

"react": "^16.1.0"
"react-dom": "^16.1.0"

"webpack": "^3.8.1"

"babel-cli": "^6.26.0",
"babel-core": "^6.26.0"
"babel-jest": "^21.2.0"
"babel-loader": "^7.1.2"
"babel-plugin-transform-decorators-legacy": "^1.3.4"
"babel-plugin-transform-object-rest-spread": "^6.26.0"
"babel-preset-env": "^1.6.1"
"babel-preset-react": "^6.24.1"

Testcase

Unable to provide. Not sure if just my environment setup perhaps?

[dropbeardan]

Read the implementation library, this behaviour seems to be desirable.

The <Menu.Item> tag will translate to DIV if it has no onClick attribute otherwise it will translate into an A tag (with its corresponding animations etc.).

If the animation is desired for a no-onClick tag, simply create an empty anonymous function for onClick={() => {}}.

Closing issue as it is invalid.

[levithomason]

@dropbeardan Please don't create functions in your render method. It reduces React's ability to do performance updates. A new function is created every time, so props comparisons always fail.

Note, that you can control what element the component should render as. This works for all components in SUIR:

<Menu.Item as='a' />
<Menu.Item as='div' />
<Menu.Item as={MySpecialItem} mySpecialProp />

In the third example, mySpecialProp is passed to MySpecialItem. All unhandled Menu.Item props are passed to the component it is rendering as. This is also true for all SUIR components.

Cheers!

[dropbeardan]

Cheers!