Fix EmojiPicker.Search external controlled values (#10)

* Reproduce issue in test

* Fix controlled changes

* Add console warning when mixing controlled and uncontrolled states

* Update CHANGELOG.md

Author: marcbouchenoire

CHANGELOG.md

@@ -1,5 +1,7 @@
 ## [Unreleased]
 
+- Fix `EmojiPicker.Search` controlled value not updating search results when updated externally. (e.g. other input, manually, etc)
+
 ## [0.1.0] - 2025-03-18
 
 - Initial release.

src/components/__tests__/emoji-picker.test.browser.tsx

@@ -449,6 +449,31 @@ describe("EmojiPicker.Search", () => {
   });
 
   it("should support a controlled search value", async () => {
+    function Page() {
+      const [search, setSearch] = useState("");
+
+      return (
+        <DefaultPage
+          searchOnChange={(event) => setSearch(event.target.value)}
+          searchValue={search}
+        />
+      );
+    }
+
+    page.render(<Page />);
+
+    await expect.element(page.getByTestId("search")).toHaveValue("");
+
+    await page.getByTestId("search").fill("cat");
+    await expect.element(page.getByTestId("search")).toHaveValue("cat");
+    await expect.element(page.getByText("🐈")).toBeInTheDocument();
+
+    await page.getByTestId("search").fill("123456789");
+    await expect.element(page.getByTestId("search")).toHaveValue("123456789");
+    await expect.element(page.getByTestId("empty")).toBeInTheDocument();
+  });
+
+  it("should support an external controlled search value", async () => {
     function Page() {
       const [search, setSearch] = useState("");
 
@@ -457,13 +482,11 @@ describe("EmojiPicker.Search", () => {
           searchOnChange={(event) => setSearch(event.target.value)}
           searchValue={search}
         >
-          <button
-            data-testid="update-search"
-            onClick={() => setSearch("hello")}
-            type="button"
-          >
-            Update search
-          </button>
+          <input
+            data-testid="controlled-search"
+            onChange={(event) => setSearch(event.target.value)}
+            type="text"
+          />
         </DefaultPage>
       );
     }
@@ -472,9 +495,13 @@ describe("EmojiPicker.Search", () => {
 
     await expect.element(page.getByTestId("search")).toHaveValue("");
 
-    await page.getByTestId("update-search").click();
+    await page.getByTestId("controlled-search").fill("cat");
+    await expect.element(page.getByTestId("search")).toHaveValue("cat");
+    await expect.element(page.getByText("🐈")).toBeInTheDocument();
 
-    await expect.element(page.getByTestId("search")).toHaveValue("hello");
+    await page.getByTestId("controlled-search").fill("123456789");
+    await expect.element(page.getByTestId("search")).toHaveValue("123456789");
+    await expect.element(page.getByTestId("empty")).toBeInTheDocument();
   });
 });
 

src/components/emoji-picker.tsx

@@ -509,6 +509,23 @@ const EmojiPickerSearch = forwardRef<HTMLInputElement, EmojiPickerSearchProps>(
         store.set({ searchRef: ref });
       }
     }, []);
+    const isControlled = typeof value === "string";
+    const wasControlled = useRef(isControlled);
+
+    useEffect(() => {
+      if (
+        process.env.NODE_ENV !== "production" &&
+        wasControlled.current !== isControlled
+      ) {
+        console.warn(
+          `EmojiPicker.Search is changing from ${
+            wasControlled ? "controlled" : "uncontrolled"
+          } to ${isControlled ? "controlled" : "uncontrolled"}.`,
+        );
+      }
+
+      wasControlled.current = isControlled;
+    }, [isControlled]);
 
     // Initialize search with a controlled or uncontrolled value
     useLayoutEffect(() => {
@@ -522,6 +539,13 @@ const EmojiPickerSearch = forwardRef<HTMLInputElement, EmojiPickerSearchProps>(
       });
     }, []);
 
+    // Handle controlled value changes
+    useLayoutEffect(() => {
+      if (typeof value === "string") {
+        store.get().onSearchChange(value);
+      }
+    }, [value]);
+
     const handleChange = useCallback(
       (event: ReactChangeEvent<HTMLInputElement>) => {
         onChange?.(event);