From 37711ee17e982dfb5c9c5b3d5549143cf0ed6ac6 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sun, 13 Sep 2020 15:34:01 -0700
Subject: [PATCH] fix: dynamically import focus-visible polyfill for emoji
 picker (#1870)

---
 .../_components/dialog/components/EmojiDialog.html     | 10 +++++++---
 src/routes/_utils/loadNonCriticalPolyfills.js          |  4 ++--
 src/routes/_utils/supportsFocusVisible.js              |  4 ++++
 3 files changed, 13 insertions(+), 5 deletions(-)
 create mode 100644 src/routes/_utils/supportsFocusVisible.js

diff --git a/src/routes/_components/dialog/components/EmojiDialog.html b/src/routes/_components/dialog/components/EmojiDialog.html
index 87edd5a1..3cf94b60 100644
--- a/src/routes/_components/dialog/components/EmojiDialog.html
+++ b/src/routes/_components/dialog/components/EmojiDialog.html
@@ -54,7 +54,6 @@
   }
 </style>
 <script>
-  /* global applyFocusVisiblePolyfill */
   import ModalDialog from './ModalDialog.html'
   import { store } from '../../../_store/store'
   import { insertEmoji } from '../../../_actions/emoji'
@@ -63,10 +62,11 @@
   import { oncreate as onCreateDialog } from '../helpers/onCreateDialog'
   import { isDarkTheme } from '../../../_utils/isDarkTheme'
   import 'emoji-picker-element/picker'
-  import 'focus-visible'
   import { registerShadowRoot, unregisterShadowRoot } from '../../../_thirdparty/a11y-dialog/a11y-dialog'
   import { doubleRAF } from '../../../_utils/doubleRAF'
   import { convertCustomEmojiToEmojiPickerFormat } from '../../../_utils/convertCustomEmojiToEmojiPickerFormat'
+  import { supportsFocusVisible } from '../../../_utils/supportsFocusVisible'
+  import { importFocusVisible } from '../../../_utils/asyncPolyfills'
 
   export default {
     async oncreate () {
@@ -81,7 +81,6 @@
         style.textContent = '.emoji { filter: grayscale(100%); }'
         picker.shadowRoot.appendChild(style)
       }
-      applyFocusVisiblePolyfill(picker.shadowRoot)
       registerShadowRoot(picker.shadowRoot)
       this.on('destroy', () => unregisterShadowRoot(picker.shadowRoot))
       if (!isUserTouching) { // auto focus the input on desktop
@@ -91,6 +90,11 @@
           })
         })
       }
+      if (!supportsFocusVisible()) {
+        await importFocusVisible()
+        /* global applyFocusVisiblePolyfill */
+        applyFocusVisiblePolyfill(picker.shadowRoot)
+      }
     },
     components: {
       ModalDialog
diff --git a/src/routes/_utils/loadNonCriticalPolyfills.js b/src/routes/_utils/loadNonCriticalPolyfills.js
index 09937470..3b605bd4 100644
--- a/src/routes/_utils/loadNonCriticalPolyfills.js
+++ b/src/routes/_utils/loadNonCriticalPolyfills.js
@@ -1,8 +1,8 @@
-import { supportsSelector } from './supportsSelector'
 import { importFocusVisible } from './asyncPolyfills'
+import { supportsFocusVisible } from './supportsFocusVisible'
 
 export function loadNonCriticalPolyfills () {
   return Promise.all([
-    !supportsSelector(':focus-visible') && importFocusVisible()
+    !supportsFocusVisible() && importFocusVisible()
   ])
 }
diff --git a/src/routes/_utils/supportsFocusVisible.js b/src/routes/_utils/supportsFocusVisible.js
new file mode 100644
index 00000000..c0914b1e
--- /dev/null
+++ b/src/routes/_utils/supportsFocusVisible.js
@@ -0,0 +1,4 @@
+import { thunk } from './thunk'
+import { supportsSelector } from './supportsSelector'
+
+export const supportsFocusVisible = thunk(() => supportsSelector(':focus-visible'))