emoji-picker-react 4.0.4 → 4.0.5

package/package.json

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

package/src/components/header/Search.tsx

@@ -48,6 +48,7 @@ export function Search() {
       <button
         className={clsx('epr-btn-clear-search', 'epr-visible-on-search-only')}
         onClick={clearSearch}
+        type="button"
       />
     </Relative>
   );
@@ -56,7 +57,7 @@ export function Search() {
 function CssSearch({ value }: { value: undefined | string }) {
   return value ? (
     <style>{`
-        .EmojiPickerReact button.epr-emoji:not([data-full-name*="${value}"]) {
+        .EmojiPickerReact button.epr-emoji:not([data-full-name*="${value.toLowerCase()}"]) {
           display: none;
         }
   `}</style>

package/src/components/header/SkinTonePicker.tsx

@@ -40,6 +40,7 @@ export function SkinTonePicker() {
           const active = skinToneVariation === activeSkinTone;
           return (
             <button
+              type="button"
               style={{
                 transform: clsx(
                   `translateX(-${i * (isOpen ? 28 : 0)}px)`,

package/src/components/navigation/CategoryNavigation.tsx

@@ -27,6 +27,7 @@ export function CategoryNavigation() {
         const category = categoryFromCategoryConfig(categoryConfig);
         return (
           <button
+            type="button"
             className={clsx('epr-cat-btn', `epr-icn-${category}`, {
               [ClassNames.active]: category === activeCategory
             })}

package/src/hooks/useFilter.ts

@@ -96,7 +96,7 @@ function useApplySearch() {
 
   return function applySearch(searchTerm: string) {
     requestAnimationFrame(() => {
-      setSearchTerm(searchTerm).then(() => {
+      setSearchTerm(searchTerm.toLowerCase()).then(() => {
         scrollTo(PickerMainRef.current, 0);
       });
     });
@@ -128,7 +128,8 @@ export function useIsEmojiFiltered(): (unified: string) => boolean {
   const { current: filter } = useFilterRef();
   const [searchTerm] = useSearchTermState();
 
-  return unified => isEmojiFilteredBySearchTerm(unified, filter, searchTerm);
+  return unified =>
+    isEmojiFilteredBySearchTerm(unified, filter, searchTerm.toLowerCase());
 }
 
 function isEmojiFilteredBySearchTerm(