fix: remove blur/focusout event for now (#15)

* fix: remove blur/focusout event for now

fixes #14

* test: disable test

src/picker/components/Picker/Picker.html

@@ -54,7 +54,6 @@
          aria-activedescendant="skintone-{activeSkinTone}"
          aria-hidden={!skinTonePickerExpanded}
          on:keydown={onSkinToneOptionKeydown}
-         on:focusout={onSkinToneOptionsBlur}
          on:click={onClickSkinToneOption}
          bind:this={skinToneDropdown}>
       {#each skinTones as skinTone, i (skinTone)}

src/picker/components/Picker/Picker.js

@@ -583,20 +583,6 @@ function onSkinToneOptionKeydown (event) {
   }
 }
 
-// eslint-disable-next-line no-unused-vars
-async function onSkinToneOptionsBlur () {
-  // On blur outside of the skintone options, collapse the skintone picker.
-  // Except if focus is just moving to another skintone option, e.g. pressing up/down to change focus
-  // I would use relatedTarget here, but iOS Safari seems to have a bug where it does not figure out
-  // the relatedTarget correctly, so I delay with rAF instead
-  await new Promise(resolve => requestAnimationFrame(resolve))
-  const { activeElement } = rootElement.getRootNode()
-
-  if (!activeElement || !activeElement.classList.contains('skintone-option')) {
-    skinTonePickerExpanded = false
-  }
-}
-
 export {
   locale,
   dataSource,

test/spec/picker/Picker.test.js

@@ -313,7 +313,8 @@ describe('Picker tests', () => {
     await waitFor(() => expect(emoji && emoji.name === 'donkey'))
   }, 5000)
 
-  test('Closes skintone picker when blurred', async () => {
+  // TODO: re-enable this behavior. See https://github.com/nolanlawson/emoji-picker-element/issues/14
+  test.skip('Closes skintone picker when blurred', async () => {
     fireEvent.click(getByRole('button', { name: /Choose a skin tone/ }))
     await waitFor(() => expect(getByRole('listbox', { name: 'Skin tones' })).toBeVisible())
     // Simulating a focusout event is hard, have to both focus and blur