[Chip] How can I make the text selectable?

I want to make the text inside a Chip selectable so that users may copy the content. despite my best efforts, when i click inside the component the text is not selectable.

import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';

import { withStyles } from '@material-ui/core/styles';
import FaceIcon from '@material-ui/icons/Face';
import Avatar from '@material-ui/core/Avatar';
import Chip from '@material-ui/core/Chip';
import Typography from '@material-ui/core/Typography';
import { emphasize, fade, darken } from '@material-ui/core/styles/colorManipulator';

import {stringToColor} from '../Generic/RandomColor';

const styles = theme => ({
  root: {
    whiteSpace: 'nowrap',
    cursor: 'inherit',
    userSelect: 'text',
  },
  label: {
    userSelect: 'text',
    whiteSpace: 'nowrap',
    cursor: 'inherit',
  },
  clickable: {
    cursor: 'text',
    userSelect: 'text',
  },
  separator: {
    marginRight: theme.spacing.unit,
  },
  fright: {
    float: 'right',
  },
  fleft: {
    float: 'left',
  },
});

function ProfileChip(props) {
  const { fullname, username, classes, theme } = props;
  return (
      <Link to={`/profile/${ username }`}>
        <span>
        <React.Fragment>
        <Chip
          component='object'
          clickable
          variant="outlined"
          classes={classes}
          label={ `${fullname} @${username}` }
          className={`${classes.chip} ${classes.fleft}`}
        />
        </React.Fragment>
        </span>
      </Link>
  );
}


ProfileChip.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles, {withTheme: true})(ProfileChip);

[paulintrognon]

I managed to make it work, text will be selectable again 🎉

<Chip sx={{ userSelect: 'unset' }} />

[eps1lon]

Looking through the material design spec chips are always clickable and I agree with @mbrookes that clickable elements should not have text selection by default. I would however agree that if they are not clickable (as shown in the demos) then we should enable text selection.

Although I would not do it. Makes it less clear what a chip represents if it’s sometimes used as a simple stylistic wrapper for some special text.

[…] portions that are clickable, but one displays an id (to maintain visual consistency) […]

That’s what I mean. If they do different things then they shouldn’t be visually consistent. Could you show me reference implementation? Maybe I’m not getting something.

However mwc and material angular enable text selection while not using the pointer cursor. The latter does not match the spec though.