[Button] stripping href from containerElement returning a tag

[petrogad]

Problem description

react-router Link elements do not support external links by default. There are comments in their library that show you how to handle externalizing these links by creating a HOC to essentially check for the host, if it's external return an a tag instead of the react-router link tag.

import React, {Component, PropTypes} from 'react';
import {Link as ReactLink} from 'react-router';

export default class Link extends Component {

    static propTypes = {
        to: PropTypes.string,
        children: PropTypes.element
    };

    render() {
        const {to, children, ...rest} = this.props;
        const toLocation = this.parseTo(to);
        const isInternal = this.isInternal(toLocation);

        const anchorAttrs = {};

        const toIsString = isString(to);
        if (toIsString && to.length > 0) {
            anchorAttrs.href = to;
            anchorAttrs.target = '_blank';
        }

        const toIsEmptyStr = toIsString && to.length === 0;

        if (isInternal && !toIsEmptyStr) {
            return <ReactLink to={toLocation.pathname} {...rest}>{children}</ReactLink>;
        }
        return <a {...anchorAttrs} {...rest}>{children}</a>;
    }

    isInternal(toLocation) {
        return window.location.host === toLocation.host;
    }

    parseTo(to) {
        const parser = document.createElement('a');
        parser.href = to;
        return parser;
    }
}

The problem is in Material-UI (a most wonderful library may I add) when you use a containerElement attribute on a MenuItem or a tab IF that container element returns an a tag, it strips out the href attribute. This is not the case on RaisedButton.

I would be happy to contribute and fix the issue myself, but I haven't been able to debug where this stripping of the href tag happens on MenuItem or Tab.

IE:

const page = {
   'slug': 'https://github.com/callemall/material-ui/issues/new',
   'title': 'Material-UI FTW'
};

<Tab label={page.title} containerElement={<Link to={page.slug}/>}/>
<MenuItem containerElement={<Link to={page.slug} />} primaryText={page.title} />

Versions

• Material-UI: 0.16.7
• React: 15.4.0
• Browser: Chrome Version 55.0.2883.95

[petrogad]

Can anyone point me to the slot I could fix this at?

[oliviertassinari]

This is not the case on RaisedButton.

I would expect the same issue on that component as the root cause seems to be in that EnhancedButton.js component.

Could you try the following diff on your custom Link component?

    render() {
-        const {to, children, ...rest} = this.props;
+        const {to, children, href, ...rest} = this.props;

[oliviertassinari]

We have been porting the component on the v1-beta branch. We reimplemented it from the ground-up. While we haven't tested it, I think that the issue is most likely fixed on that branch. Hence, I'm closing it.
Still, we will accept PR fixes until v1-beta takes over the master branch.