emoji-picker-react 4.13.2 → 4.13.3

package/dist/globals/doesBrowserSupportCssHas.d.ts

@@ -0,0 +1,2 @@
+declare const browserSupportsCssHas: boolean;
+export default browserSupportsCssHas;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.13.2",
+  "version": "4.13.3",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/header/Search/Search.tsx

@@ -64,9 +64,7 @@ export function Search() {
         placeholder={placeholder}
         onChange={event => {
           setInc(inc + 1);
-          setTimeout(() => {
-            onChange(event?.target?.value ?? value);
-          });
+          onChange(event?.target?.value ?? value);
         }}
         ref={SearchInputRef}
       />

package/src/globals/doesBrowserSupportCssHas.ts

@@ -0,0 +1,16 @@
+function doesBrowserSupportCssHas(): boolean {
+  // if env is not browser:
+  if (typeof window === 'undefined' || typeof window.CSS === 'undefined') {
+    return false;
+  }
+
+  try {
+    return CSS.supports('selector(:has(*))');
+  } catch (e) {
+    return false;
+  }
+}
+
+const browserSupportsCssHas = doesBrowserSupportCssHas();
+
+export default browserSupportsCssHas;

package/src/hooks/useFilter.ts

@@ -11,6 +11,7 @@ import {
 import { useSearchResultsConfig } from '../config/useConfig';
 import { DataEmoji } from '../dataUtils/DataTypes';
 import { emojiNames } from '../dataUtils/emojiSelectors';
+import doesBrowserSupportCssHas from '../globals/doesBrowserSupportCssHas';
 
 import { useFocusSearchInput } from './useFocus';
 
@@ -77,28 +78,34 @@ export function useFilter() {
   };
 
   function onChange(inputValue: string) {
-    const filter = filterRef.current;
+    if (doesBrowserSupportCssHas) {
+      return;
+    }
 
-    const nextValue = inputValue.toLowerCase();
+    setTimeout(() => {
+      const filter = filterRef.current;
 
-    if (filter?.[nextValue] || nextValue.length <= 1) {
-      return applySearch(nextValue);
-    }
+      const nextValue = inputValue.toLowerCase();
 
-    const longestMatch = findLongestMatch(nextValue, filter);
+      if (filter?.[nextValue] || nextValue.length <= 1) {
+        return applySearch(nextValue);
+      }
 
-    if (!longestMatch) {
-      // Can we even get here?
-      // If so, we need to search among all emojis
-      return applySearch(nextValue);
-    }
+      const longestMatch = findLongestMatch(nextValue, filter);
 
-    setFilterRef(current =>
-      Object.assign(current, {
-        [nextValue]: filterEmojiObjectByKeyword(longestMatch, nextValue)
-      })
-    );
-    applySearch(nextValue);
+      if (!longestMatch) {
+        // Can we even get here?
+        // If so, we need to search among all emojis
+        return applySearch(nextValue);
+      }
+
+      setFilterRef(current =>
+        Object.assign(current, {
+          [nextValue]: filterEmojiObjectByKeyword(longestMatch, nextValue)
+        })
+      );
+      applySearch(nextValue);
+    });
   }
 }