Material-ui: SVG Icon: HoverColor not working...

[tathagatbanerjee]

After onClick event on wrapper , hoverColor prop stops working on SVGIcon.

Steps to reproduce

(1) Structure: Span -> IconButton -> SVGIcon
(2) the hoverColor attribute on the inner SVGIcon works fine until onClick event is triggered.

For extra confirmation, I user an observable element to control a Boolean, on the basis of which hoverColor attribute changes.

The concerning part is that, after the onClick event, the console statements of 'mouse enter' and 'mouse leave' no longer work.

Note: It seems similar to this, but it was closed so...

Code:

import React, { Component, PropTypes } from 'react';

import { observable } from 'mobx';
import { observer } from 'mobx-react';

import Badge from 'material-ui/Badge';
import IconButton from 'material-ui/IconButton';
import EditorInsertDriveFile from 'material-ui/svg-icons/editor/insert-drive-file';
import Chip from 'material-ui/Chip';
import {lightBlueA200, greenA200} from 'material-ui/styles/colors';

@observer
export class ShowFile extends Component {
  @observable hoverColor = Boolean(false); // Initialise as false...

  handleOnClick() {
    console.log(this.props.file.taxItemName);
  }

  handleMouseEnter() {
    console.log('mouse enter');
    this.hoverColor = !this.hoverColor;
  }

  handleMouseLeave() {
    console.log('mouse leave');
    this.hoverColor = !this.hoverColor;
  }

  render() {
    const styles = {
      mediumIcon: {
        width: 48,
        height: 48,
      },
      medium: {
        width: 96,
        height: 84,
        padding: 24,
      },
      chip: {
        display: 'block',
        margin: 'auto',
      },
    };

    return (
      <span>
        <IconButton
          iconStyle={styles.mediumIcon}
          style={styles.medium}
          onClick={this.handleOnClick.bind(this)}
        >
          <EditorInsertDriveFile
            color={lightBlueA200}
            hoverColor={ (this.hoverColor) ? greenA200 : ''}  // if true, show color...
            onMouseEnter={this.handleMouseEnter.bind(this)}
            onMouseLeave={this.handleMouseLeave.bind(this)}
          />
        </IconButton>
        <Chip style={styles.chip}>{this.props.file.taxItemName}</Chip>
      </span>
    );
  }
}

ShowFile.propTypes = {
  libs: PropTypes.array.isRequired,
  file: PropTypes.object.isRequired,
  user: PropTypes.object.isRequired,
};

Versions

• Material-UI: [email protected]
• React: [email protected]
• Browser: Version 52.0.2743.82 unknown (64-bit) [I'm on Ubuntu using Chrome]

[sangthebui]

I also ran into this issue. Did you find a solution or workaround yet?

[taylorgoolsby]

I had this problem. If I set disableTouchRipple={true} on the IconButton, then hovering still works even after clicking. It's a quick fix, but you have to make a trade-off between responding to hover or having a ripple effect. I haven't looked into it, but I'm guess the ripple is rendered on top of the element which has the onMouseOver and onMouseOut handler bound to it, so it's blocking those events.

[nmaves]

@tathagatbanerjee why was this closed without a resolution?

[tathagatbanerjee]

Can we assume its because I'm a muppet and got confused. Apologies. Have reopened.

[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.