fix: fix category with unsetting customEmoji (#277)

Fixes #276

src/picker/components/Picker/Picker.js

@@ -162,6 +162,11 @@ $: {
   if (customEmoji && customEmoji.length) {
     groups = [customGroup, ...defaultGroups]
   } else if (groups !== defaultGroups) {
+    if (currentGroupIndex) {
+      // If the current group is anything other than "custom" (which is first), decrement.
+      // This fixes the odd case where you set customEmoji, then pick a category, then unset customEmoji
+      currentGroupIndex--
+    }
     groups = defaultGroups
   }
 }

test/spec/picker/custom.test.js

@@ -50,4 +50,72 @@ describe('Custom emojis tests', () => {
     document.body.removeChild(picker)
     await tick(20)
   })
+
+  test('Setting custom emoji, selecting flags, unsetting custom emoji', async () => {
+    const picker = new Picker({
+      locale: 'en',
+      dataSource: ALL_EMOJI
+    })
+    picker.customEmoji = [
+      {
+        name: 'themonkey',
+        shortcodes: ['themonkey'],
+        url: 'themonkey.png'
+      }
+    ]
+    document.body.appendChild(picker)
+
+    const container = picker.shadowRoot.querySelector('.picker')
+
+    await waitFor(() => expect(getAllByRole(container, 'tab')).toHaveLength(groups.length + 1))
+
+    await waitFor(() => expect(getByRole(container, 'menuitem', { name: 'themonkey' })).toBeVisible())
+
+    getByRole(container, 'tab', { name: 'Flags' }).click()
+
+    await waitFor(() => expect(getByRole(container, 'menuitem', { name: /🏁/ })).toBeVisible())
+
+    picker.customEmoji = undefined
+
+    await waitFor(() => expect(getAllByRole(container, 'tab')).toHaveLength(groups.length))
+
+    await waitFor(() => expect(getByRole(container, 'menuitem', { name: /🏁/ })).toBeVisible())
+
+    expect(getByRole(container, 'tab', { name: 'Flags' }).getAttribute('aria-selected')).toEqual('true')
+
+    document.body.removeChild(picker)
+    await tick(20)
+  })
+
+  test('Setting custom emoji, unsetting custom emoji', async () => {
+    const picker = new Picker({
+      locale: 'en',
+      dataSource: ALL_EMOJI
+    })
+    picker.customEmoji = [
+      {
+        name: 'themonkey',
+        shortcodes: ['themonkey'],
+        url: 'themonkey.png'
+      }
+    ]
+    document.body.appendChild(picker)
+
+    const container = picker.shadowRoot.querySelector('.picker')
+
+    await waitFor(() => expect(getAllByRole(container, 'tab')).toHaveLength(groups.length + 1))
+
+    await waitFor(() => expect(getByRole(container, 'menuitem', { name: 'themonkey' })).toBeVisible())
+
+    picker.customEmoji = undefined
+
+    await waitFor(() => expect(getAllByRole(container, 'tab')).toHaveLength(groups.length))
+
+    await waitFor(() => expect(getByRole(container, 'menuitem', { name: /😀/ })).toBeVisible())
+
+    expect(getByRole(container, 'tab', { name: 'Smileys and emoticons' }).getAttribute('aria-selected')).toEqual('true')
+
+    document.body.removeChild(picker)
+    await tick(20)
+  })
 })