From bad36eb8a4b934310e662107a4f1f72e817a6221 Mon Sep 17 00:00:00 2001
From: Alex Yang <himself65@outlook.com>
Date: Wed, 27 Nov 2024 13:48:07 -0800
Subject: [PATCH 1/2] [Select]: fix `onValueChange` will call with empty string
 when side form

---
 packages/react/select/src/Select.stories.tsx | 57 ++++++++++++++++++++
 packages/react/select/src/Select.tsx         |  3 +-
 2 files changed, 59 insertions(+), 1 deletion(-)

diff --git a/packages/react/select/src/Select.stories.tsx b/packages/react/select/src/Select.stories.tsx
index 6fe46281e..1a3e610b3 100644
--- a/packages/react/select/src/Select.stories.tsx
+++ b/packages/react/select/src/Select.stories.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import * as ReactDOM from 'react-dom';
 import { css } from '../../../../stitches.config';
 import * as Select from '@radix-ui/react-select';
 import { Label } from '@radix-ui/react-label';
@@ -511,6 +512,62 @@ export const WithinForm = () => {
   );
 };
 
+export const RefreshItemsWithinForm = function SelectDemo() {
+  const [value, setValue] = React.useState<string>('apple');
+  const [hide, setHide] = React.useState(false);
+
+  return (
+    <form onSubmit={(e) => e.preventDefault()}>
+      <p>current value: {value}</p>
+      <button
+        onClick={() => {
+          ReactDOM.flushSync(() => {
+            setHide(true);
+          });
+          ReactDOM.flushSync(() => {
+            setValue('banana');
+            setHide(false);
+          });
+        }}
+      >
+        Update to banana
+      </button>
+
+      <Select.Root value={value} onValueChange={setValue}>
+        <Select.Trigger className={triggerClass()}>
+          <Select.Value placeholder="select a fruit" />
+          <Select.Icon />
+        </Select.Trigger>
+        <Select.Portal>
+          <Select.Content className={contentClass()}>
+            <Select.Viewport className={viewportClass()}>
+              {hide ? null : (
+                <>
+                  <Select.Item className={itemClass()} value="apple">
+                    <Select.ItemText>Apple</Select.ItemText>
+                  </Select.Item>
+                  <Select.Item className={itemClass()} value="banana">
+                    <Select.ItemText>Banana</Select.ItemText>
+                  </Select.Item>
+                  <Select.Item className={itemClass()} value="blueberry">
+                    <Select.ItemText>Blueberry</Select.ItemText>
+                  </Select.Item>
+                  <Select.Item className={itemClass()} value="grapes">
+                    <Select.ItemText>Grapes</Select.ItemText>
+                  </Select.Item>
+                  <Select.Item className={itemClass()} value="pineapple">
+                    <Select.ItemText>Pineapple</Select.ItemText>
+                  </Select.Item>
+                </>
+              )}
+            </Select.Viewport>
+          </Select.Content>
+        </Select.Portal>
+      </Select.Root>
+    </form>
+  );
+};
+
 export const DisabledWithinForm = () => {
   const [data, setData] = React.useState({});
 
diff --git a/packages/react/select/src/Select.tsx b/packages/react/select/src/Select.tsx
index 5e848d8ca..2935fcd9b 100644
--- a/packages/react/select/src/Select.tsx
+++ b/packages/react/select/src/Select.tsx
@@ -1615,7 +1615,8 @@ const BubbleSelect = React.forwardRef<HTMLSelectElement, React.ComponentPropsWit
       if (prevValue !== value && setValue) {
         const event = new Event('change', { bubbles: true });
         setValue.call(select, value);
-        select.dispatchEvent(event);
+        // delay the dispatch to the next tick to ensure React has updated the select options
+        window.setTimeout(() => select.dispatchEvent(event));
       }
     }, [prevValue, value]);
 

From 24ab3f7586099192baf261a78343be695f0c7f3b Mon Sep 17 00:00:00 2001
From: Alex Yang <himself65@outlook.com>
Date: Tue, 3 Dec 2024 20:12:24 -0800
Subject: [PATCH 2/2] [Select]: fix `onValueChange` will call with empty string
 when side form

---
 packages/react/select/src/Select.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/react/select/src/Select.tsx b/packages/react/select/src/Select.tsx
index 2935fcd9b..e3a227d86 100644
--- a/packages/react/select/src/Select.tsx
+++ b/packages/react/select/src/Select.tsx
@@ -1616,7 +1616,8 @@ const BubbleSelect = React.forwardRef<HTMLSelectElement, React.ComponentPropsWit
         const event = new Event('change', { bubbles: true });
         setValue.call(select, value);
         // delay the dispatch to the next tick to ensure React has updated the select options
-        window.setTimeout(() => select.dispatchEvent(event));
+        const id = window.setTimeout(() => select.dispatchEvent(event));
+        return () => window.clearTimeout(id);
       }
     }, [prevValue, value]);