From 48bed5ced57fe133542d2fbb21ed9ff930f2e2ef Mon Sep 17 00:00:00 2001
From: Xindi Xu <xindixu@utexas.edu>
Date: Mon, 20 Jul 2020 13:56:21 -0500
Subject: [PATCH] on preview change props

---
 src/components/picker/nimble-picker.js |  2 +
 src/components/preview.js              | 89 ++++++++++++++------------
 src/components/skins-dot.js            |  2 +-
 src/utils/shared-default-props.js      |  1 +
 src/utils/shared-props.js              |  1 +
 5 files changed, 53 insertions(+), 42 deletions(-)

diff --git a/src/components/picker/nimble-picker.js b/src/components/picker/nimble-picker.js
index ab173fa5b..b3528f4f1 100644
--- a/src/components/picker/nimble-picker.js
+++ b/src/components/picker/nimble-picker.js
@@ -322,6 +322,7 @@ export default class NimblePicker extends React.PureComponent {
         // Focus on first category anchor
         this.anchors.buttons.firstChild.focus()
         this.setState({ emoji: null })
+        this.props.onShowSkin()
         return
 
       case 'ArrowLeft':
@@ -824,6 +825,7 @@ export default class NimblePicker extends React.PureComponent {
               title={title}
               emoji={emoji}
               idleEmoji={idleEmoji}
+              onShowSkin={this.props.onShowSkin}
               showSkinTones={showSkinTones}
               showPreview={showPreview}
               emojiProps={{
diff --git a/src/components/preview.js b/src/components/preview.js
index df8af864c..14ac087fd 100644
--- a/src/components/preview.js
+++ b/src/components/preview.js
@@ -13,6 +13,12 @@ export default class Preview extends React.PureComponent {
     this.data = props.data
   }
 
+  componentDidUpdate(prevProps) {
+    if (prevProps.emoji && !this.props.emoji) {
+      this.props.onShowSkin()
+    }
+  }
+
   render() {
     const {
       emoji,
@@ -70,54 +76,55 @@ export default class Preview extends React.PureComponent {
           </div>
         </div>
       )
-    } else {
-      return (
-        <div className="emoji-mart-preview">
-          <div className="emoji-mart-preview-emoji" aria-hidden="true">
-            {idleEmoji &&
-              idleEmoji.length &&
-              NimbleEmoji({
-                emoji: idleEmoji,
-                data: this.data,
-                ...emojiProps,
-              })}
-          </div>
+    }
 
-          <div className="emoji-mart-preview-data" aria-hidden="true">
-            <span className="emoji-mart-title-label">{title}</span>
-          </div>
+    return (
+      <div className="emoji-mart-preview">
+        <div className="emoji-mart-preview-emoji" aria-hidden="true">
+          {idleEmoji &&
+            idleEmoji.length &&
+            NimbleEmoji({
+              emoji: idleEmoji,
+              data: this.data,
+              ...emojiProps,
+            })}
+        </div>
 
-          {showSkinTones && (
-            <div
-              className={`emoji-mart-preview-skins${
-                skinsProps.skinEmoji ? ' custom' : ''
-              }`}
-            >
-              {skinsProps.skinEmoji ? (
-                <SkinsEmoji
-                  skin={skinsProps.skin}
-                  emojiProps={emojiProps}
-                  data={this.data}
-                  skinEmoji={skinsProps.skinEmoji}
-                  i18n={i18n}
-                  onChange={skinsProps.onChange}
-                />
-              ) : (
-                <SkinsDot
-                  skin={skinsProps.skin}
-                  i18n={i18n}
-                  onChange={skinsProps.onChange}
-                />
-              )}
-            </div>
-          )}
+        <div className="emoji-mart-preview-data" aria-hidden="true">
+          <span className="emoji-mart-title-label">{title}</span>
         </div>
-      )
-    }
+
+        {showSkinTones && (
+          <div
+            className={`emoji-mart-preview-skins${
+              skinsProps.skinEmoji ? ' custom' : ''
+            }`}
+          >
+            {skinsProps.skinEmoji ? (
+              <SkinsEmoji
+                skin={skinsProps.skin}
+                emojiProps={emojiProps}
+                data={this.data}
+                skinEmoji={skinsProps.skinEmoji}
+                i18n={i18n}
+                onChange={skinsProps.onChange}
+              />
+            ) : (
+              <SkinsDot
+                skin={skinsProps.skin}
+                i18n={i18n}
+                onChange={skinsProps.onChange}
+              />
+            )}
+          </div>
+        )}
+      </div>
+    )
   }
 }
 
 Preview.propTypes = {
+  onShowSkin: PropTypes.func.isRequired,
   showSkinTones: PropTypes.bool,
   title: PropTypes.string.isRequired,
   idleEmoji: PropTypes.string.isRequired,
diff --git a/src/components/skins-dot.js b/src/components/skins-dot.js
index 116db034d..201bd3253 100644
--- a/src/components/skins-dot.js
+++ b/src/components/skins-dot.js
@@ -52,7 +52,6 @@ export default class SkinsDot extends Skins {
 
       case 'Tab':
         e.preventDefault()
-        e.stopPropagation()
         if (e.shiftKey) {
           selectLeft()
         } else {
@@ -75,6 +74,7 @@ export default class SkinsDot extends Skins {
       default:
         break
     }
+    e.stopPropagation()
   }
 
   setSkinTonesRef(c) {
diff --git a/src/utils/shared-default-props.js b/src/utils/shared-default-props.js
index ea369dc06..fe21fc7b9 100644
--- a/src/utils/shared-default-props.js
+++ b/src/utils/shared-default-props.js
@@ -16,6 +16,7 @@ const PickerDefaultProps = {
   onClick: () => {},
   onSelect: () => {},
   onSkinChange: () => {},
+  onShowSkin: () => {},
   emojiSize: 24,
   perLine: 9,
   i18n: {},
diff --git a/src/utils/shared-props.js b/src/utils/shared-props.js
index 8c8faa1dc..93662a5d0 100644
--- a/src/utils/shared-props.js
+++ b/src/utils/shared-props.js
@@ -24,6 +24,7 @@ const PickerPropTypes = {
   onClick: PropTypes.func,
   onSelect: PropTypes.func,
   onSkinChange: PropTypes.func,
+  onShowSkin: PropTypes.func,
   perLine: PropTypes.number,
   emojiSize: PropTypes.number,
   i18n: PropTypes.object,