diff --git a/src/picker/components/Picker/Picker.html b/src/picker/components/Picker/Picker.html index 32092b1a..b6914e80 100644 --- a/src/picker/components/Picker/Picker.html +++ b/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)} diff --git a/src/picker/components/Picker/Picker.js b/src/picker/components/Picker/Picker.js index 4b2f0519..da128105 100644 --- a/src/picker/components/Picker/Picker.js +++ b/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, diff --git a/test/spec/picker/Picker.test.js b/test/spec/picker/Picker.test.js index 5802c7e5..4f665420 100644 --- a/test/spec/picker/Picker.test.js +++ b/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