Reset preview when not hovering emojis anymore

src/components/emoji.js

@@ -33,11 +33,12 @@ export default class Emoji extends React.Component {
   }
 
   render() {
-    var { sheetURL, size, onOver, onClick } = this.props
+    var { sheetURL, size, onOver, onLeave, onClick } = this.props
 
     return <span
       onClick={() => onClick(this.emoji)}
       onMouseEnter={() => onOver(this.emoji)}
+      onMouseLeave={() => onLeave(this.emoji)}
       className='emoji-picker-emoji'>
       <span style={{
         width: size,
@@ -54,6 +55,7 @@ export default class Emoji extends React.Component {
 
 Emoji.propTypes = {
   onOver: React.PropTypes.func,
+  onLeave: React.PropTypes.func,
   onClick: React.PropTypes.func,
   size: React.PropTypes.number.isRequired,
   emoji: React.PropTypes.string.isRequired,
@@ -62,5 +64,6 @@ Emoji.propTypes = {
 
 Emoji.defaultProps = {
   onOver: (() => {}),
+  onLeave: (() => {}),
   onClick: (() => {}),
 }

src/components/picker.js

@@ -31,6 +31,14 @@ export default class Picker extends React.Component {
   handleEmojiOver(emoji) {
     var { preview } = this.refs
     preview.setState({ emoji: emoji })
+    clearTimeout(this.leaveTimeout)
+  }
+
+  handleEmojiLeave(emoji) {
+    this.leaveTimeout = setTimeout(() => {
+      var { preview } = this.refs
+      preview.setState({ emoji: null })
+    }, 16)
   }
 
   handleScroll() {
@@ -84,6 +92,7 @@ export default class Picker extends React.Component {
               size: emojiSize,
               sheetURL: sheetURL,
               onOver: this.handleEmojiOver.bind(this),
+              onLeave: this.handleEmojiLeave.bind(this),
               onClick: this.props.onClick,
             }}
           />