From 2afd85f6228d1427261887d0b99cd2774f1af151 Mon Sep 17 00:00:00 2001
From: Xindi Xu <xindixu@utexas.edu>
Date: Tue, 21 Jul 2020 13:26:54 -0500
Subject: [PATCH] clean up + update test

---
 src/components/__tests__/skins-dot.js  |  4 ++--
 src/components/picker/nimble-picker.js |  9 +++------
 src/components/skins-dot.js            |  3 ++-
 stories/index.js                       | 18 +++++++-----------
 4 files changed, 14 insertions(+), 20 deletions(-)

diff --git a/src/components/__tests__/skins-dot.js b/src/components/__tests__/skins-dot.js
index 4f4a756d2..c6024286b 100644
--- a/src/components/__tests__/skins-dot.js
+++ b/src/components/__tests__/skins-dot.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { shallow, configure } from 'enzyme'
+import { mount, configure } from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
 import SkinsDot from '../skins-dot'
 
@@ -21,7 +21,7 @@ test('click dot to expand the menu', () => {
     },
   }
 
-  const skins = shallow(<SkinsDot skin={1} onChange={onChange} i18n={i18n} />)
+  const skins = mount(<SkinsDot skin={1} onChange={onChange} i18n={i18n} />)
 
   // component should be un-expanded by default
   expect(skins.find('[aria-haspopup]').prop('aria-label')).toEqual(
diff --git a/src/components/picker/nimble-picker.js b/src/components/picker/nimble-picker.js
index 4133a81f5..47e5c01ba 100644
--- a/src/components/picker/nimble-picker.js
+++ b/src/components/picker/nimble-picker.js
@@ -634,12 +634,9 @@ class NimblePicker extends React.PureComponent {
         const activeCategoryIndex = this.categories.findIndex(
           ({ name }) => name === activeCategory,
         )
-        const { container } = this.categoryRefs[
-          `category-${activeCategoryIndex}`
-        ]
-
-        const firstEmoji = container.querySelector('button')
-        firstEmoji.focus()
+        const emojiEl = this.getEmojiElement(activeCategoryIndex, 0)
+        emojiEl.focus()
+        this.getEmojiToPreview(activeCategoryIndex, 0)
         handled = true
         break
 
diff --git a/src/components/skins-dot.js b/src/components/skins-dot.js
index f469641c4..8e72b3fb7 100644
--- a/src/components/skins-dot.js
+++ b/src/components/skins-dot.js
@@ -109,6 +109,8 @@ export default class SkinsDot extends Skins {
               if (opened) {
                 this.handleClick(e)
                 this.onClose(e)
+              } else {
+                this.handleMenuClick(e)
               }
             }}
             onKeyDown={(e) => this.handleSkinKeyDown(e, skinTone)}
@@ -138,7 +140,6 @@ export default class SkinsDot extends Skins {
         <div
           {...(opened ? { role: 'menubar' } : {})}
           tabIndex={'0'}
-          onClick={this.handleMenuClick}
           onKeyDown={this.handleKeyDown}
           ref={this.setSkinTonesRef}
         >
diff --git a/stories/index.js b/stories/index.js
index 92bea4c1e..0e470b6ff 100644
--- a/stories/index.js
+++ b/stories/index.js
@@ -69,17 +69,13 @@ storiesOf('Picker', module)
     />
   ))
 
-  .add('Custom “Not found” component', () => {
-    const ref = useRef(null)
-    return (
-      <Picker
-        ref={ref}
-        notFound={() => (
-          <img src="https://github.githubassets.com/images/icons/emoji/octocat.png" />
-        )}
-      />
-    )
-  })
+  .add('Custom “Not found” component', () => (
+    <Picker
+      notFound={() => (
+        <img src="https://github.githubassets.com/images/icons/emoji/octocat.png" />
+      )}
+    />
+  ))
 
   .add('Custom categories', () => (
     <Picker custom={CUSTOM_EMOJIS_WITH_CATEGORIES} />