Fix: respect defaultValue in Select and MultiSelect (#522)

* feat: add useUpdateEffect hook

* fix(SingleSelect): respect defaultValue

* test(SingleSelect): respect defaultValue

* fix(MultiSelect): respect defaultValue

* test(MultiSelect): respect defaultValue

Author: ariser

.eslintrc.cjs

@@ -29,5 +29,8 @@ module.exports = {
         singleReturnOnly: false,
       },
     ],
+    "react-hooks/exhaustive-deps": ["warn", {
+      "additionalHooks": "(useUpdateEffect)"
+    }]  
   },
 };

src/components/Select/MultiSelect.test.tsx

@@ -83,6 +83,16 @@ describe("MultiSelect", () => {
     expect(queryByTestingText(selectTrigger, "Content3")).toBeNull();
   });
 
+  it("should respect given defaultValue in select", () => {
+    const { getByTestId } = renderSelect({
+      defaultValue: ["content0", "content2"],
+    });
+    const selectTrigger = getByTestId("select-trigger");
+    expect(selectTrigger).not.toBeNull();
+    expect(queryByTestingText(selectTrigger, "Content0")).not.toBeNull();
+    expect(queryByTestingText(selectTrigger, "Content2")).not.toBeNull();
+  });
+
   it("should show error", () => {
     const { queryByText } = renderSelect({
       error: "Select Error",

src/components/Select/MultiSelect.tsx

@@ -1,4 +1,6 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useState } from "react";
+
+import {useUpdateEffect} from "@/hooks";
 
 import { SelectContainerProps, SelectOptionProp, SelectionType } from "./common/types";
 import {
@@ -43,7 +45,7 @@ export const MultiSelect = ({
     [onOpenChangeProp]
   );
 
-  useEffect(() => {
+  useUpdateEffect(() => {
     setSelectedValues(valueProp ?? []);
   }, [valueProp]);
 

src/components/Select/SingleSelect.test.tsx

@@ -115,6 +115,14 @@ describe("Select", () => {
     expect(queryByTestingText(selectTrigger, "Content0")).not.toBeNull();
   });
 
+  it("should respect given defaultValue in select", () => {
+    const { getByTestId } = renderSelect({
+      defaultValue: "content0",
+    });
+    const selectedValue = getByTestId("select-trigger");
+    expect(selectedValue.textContent).toBe("Content0");
+  });
+
   it("should render options", () => {
     const { queryByText, getByTestId } = renderSelect({
       options: selectOptions,

src/components/Select/SingleSelect.tsx

@@ -1,4 +1,7 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useState } from "react";
+
+import { useUpdateEffect } from "@/hooks";
+
 import { SelectContainerProps, SelectOptionProp, SelectionType } from "./common/types";
 import { InternalSelect, SelectGroup, SelectItem } from "./common/InternalSelect";
 
@@ -65,7 +68,7 @@ export const Select = ({
     [selectedValues, onSelect]
   );
 
-  useEffect(() => {
+  useUpdateEffect(() => {
     setSelectedValues(valueProp ? [valueProp] : []);
   }, [valueProp]);
 

src/hooks/index.ts

@@ -0,0 +1 @@
+export * from "./useUpdateEffect";

src/hooks/useUpdateEffect.ts

@@ -0,0 +1,15 @@
+import { useEffect, useRef } from "react";
+
+export const useUpdateEffect: typeof useEffect = (effect, deps) => {
+    const isFirstMount = useRef(true);
+
+    useEffect(() => {
+        if (isFirstMount) {
+            isFirstMount.current = false;
+            return;
+        }
+
+        return effect();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, deps);
+};