import React, {
  // PropTypes,
  Component,
} from 'react';
import styles from './styles.css';
import Avatar from './Avatar';

export default class MentionOption extends Component {

  constructor(props) {
    super(props);
    this.state = {};
  }

  onMentionSelect = () => {
    this.props.onMentionSelect(this.props.mention);
  };

  onMouseEnter = () => {
    this.props.onMentionFocus(this.props.index);
  };

  render() {
    const className = this.props.isFocused ? styles.focusedRoot : styles.root;
    return (
      <div
        className={ className }
        onClick={ this.onMentionSelect }
        onMouseEnter={ this.onMouseEnter }
        role="option"
      >
        <Avatar mention={ this.props.mention } />
        <span className={ styles.text }>{ this.props.mention.get('name') }</span>
      </div>
    );
  }
}

@@ -231,18 +231,25 @@
 his.
-state = %7B%7D
+mouseDown = false
 ;%0A  
@@ -257,84 +257,345 @@
 %0A%0A  
+comp
 on
-M
 ent
-ionSelect = () =%3E %7B%0A    this.props.onMentionSelect(this.props.mention)
+DidUpdate() %7B%0A    this.mouseDown = false;%0A  %7D%0A%0A  onMouseUp = () =%3E %7B%0A    if (this.mouseDown) %7B%0A      this.mouseDown = false;%0A      this.props.onMentionSelect(this.props.mention);%0A    %7D%0A  %7D;%0A%0A  onMouseDown = (event) =%3E %7B%0A    // Note: important to avoid a content edit change%0A    event.preventDefault();%0A%0A    this.mouseDown = true
 ;%0A  
@@ -840,13 +840,17 @@
   on
-Click
+MouseDown
 =%7B t
@@ -856,28 +856,61 @@
 this.onM
-entionSelect
+ouseDown %7D%0A        onMouseUp=%7B this.onMouseUp
  %7D%0A     

fix mouse click issue