@radix-ui/react-select 2.3.8 → 2.3.9-rc.1791245332176

package/dist/index.mjs

@@ -24,7 +24,6 @@ import { createSlot } from "@radix-ui/react-slot";
 import { useCallbackRef } from "@radix-ui/react-use-callback-ref";
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
 import { useLayoutEffect } from "@radix-ui/react-use-layout-effect";
-import { usePrevious } from "@radix-ui/react-use-previous";
 import { VISUALLY_HIDDEN_STYLES } from "@radix-ui/react-visually-hidden";
 import { hideOthers } from "aria-hidden";
 import { RemoveScroll } from "react-remove-scroll";
@@ -85,6 +84,11 @@ function SelectProvider(props) {
     caller: SELECT_NAME
   });
   const triggerPointerDownPosRef = React.useRef(null);
+  const hasConsumerStoppedPropagationRef = React.useRef(false);
+  const [userInteractionCount, onUserInteraction] = React.useReducer(
+    (count) => count + 1,
+    0
+  );
   const initialValueRef = React.useRef(value);
   React.useEffect(() => {
     const associatedForm = form ? trigger?.ownerDocument.getElementById(form) : trigger?.form;
@@ -119,6 +123,9 @@ function SelectProvider(props) {
     contentId,
     value,
     onValueChange: setValue,
+    hasConsumerStoppedPropagationRef,
+    userInteractionCount,
+    onUserInteraction,
     open,
     onOpenChange: setOpen,
     dir: direction,
@@ -176,6 +183,7 @@ var SelectTrigger = /* @__PURE__ */ React.forwardRef(
       const currentItem = enabledItems.find((item) => item.value === context.value);
       const nextItem = findNextItem(enabledItems, search, currentItem);
       if (nextItem !== void 0) {
+        context.onUserInteraction();
         context.onValueChange(nextItem.value);
       }
     });
@@ -227,7 +235,10 @@ var SelectTrigger = /* @__PURE__ */ React.forwardRef(
         onKeyDown: composeEventHandlers(triggerProps.onKeyDown, (event) => {
           const isTypingAhead = searchRef.current !== "";
           const isModifierKey = event.ctrlKey || event.altKey || event.metaKey;
-          if (!isModifierKey && event.key.length === 1) handleTypeaheadSearch(event.key);
+          if (!isModifierKey && event.key.length === 1) {
+            context.hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();
+            handleTypeaheadSearch(event.key);
+          }
           if (isTypingAhead && event.key === " ") return;
           if (OPEN_KEYS.includes(event.key)) {
             handleOpen();
@@ -834,10 +845,13 @@ var SelectItem = /* @__PURE__ */ React.forwardRef(
     const composedRefs = useComposedRefs(forwardedRef, handleItemRefCallback);
     const textId = useId();
     const pointerTypeRef = React.useRef("touch");
-    const handleSelect = /* @__PURE__ */ __name(() => {
+    function handleSelect(event) {
+      context.hasConsumerStoppedPropagationRef.current = event.isPropagationStopped();
+      context.onUserInteraction();
       context.onValueChange(value);
       context.onOpenChange(false);
-    }, "handleSelect");
+    }
+    __name(handleSelect, "handleSelect");
     return /* @__PURE__ */ jsx(
       SelectItemContextProvider,
       {
@@ -871,20 +885,20 @@ var SelectItem = /* @__PURE__ */ React.forwardRef(
                 ref: composedRefs,
                 onFocus: composeEventHandlers(itemProps.onFocus, () => setIsFocused(true)),
                 onBlur: composeEventHandlers(itemProps.onBlur, () => setIsFocused(false)),
-                onClick: composeEventHandlers(itemProps.onClick, () => {
+                onClick: composeEventHandlers(itemProps.onClick, (event) => {
                   if (disabled) {
                     return;
                   }
                   if (pointerTypeRef.current !== "mouse") {
-                    handleSelect();
+                    handleSelect(event);
                   }
                 }),
-                onPointerUp: composeEventHandlers(itemProps.onPointerUp, () => {
+                onPointerUp: composeEventHandlers(itemProps.onPointerUp, (event) => {
                   if (disabled) {
                     return;
                   }
                   if (pointerTypeRef.current === "mouse") {
-                    handleSelect();
+                    handleSelect(event);
                   }
                 }),
                 onPointerDown: composeEventHandlers(itemProps.onPointerDown, (event) => {
@@ -912,7 +926,7 @@ var SelectItem = /* @__PURE__ */ React.forwardRef(
                     return;
                   }
                   if (SELECTION_KEYS.includes(event.key)) {
-                    handleSelect();
+                    handleSelect(event);
                   }
                   if (event.key === " ") {
                     event.preventDefault();
@@ -1101,12 +1115,23 @@ var SelectBubbleInput = /* @__PURE__ */ React.forwardRef(
   // blank line to reduce diff noise
   /* @__PURE__ */ __name(function SelectBubbleInput2({ __scopeSelect, ...props }, forwardedRef) {
     const context = useSelectContext(BUBBLE_INPUT_NAME, __scopeSelect);
-    const { value, onValueChange, required, disabled, name, autoComplete, form } = context;
+    const {
+      value,
+      onValueChange,
+      required,
+      disabled,
+      name,
+      autoComplete,
+      form,
+      hasConsumerStoppedPropagationRef,
+      userInteractionCount
+    } = context;
     const { nativeOptions, nativeSelectKey } = context;
     const ref = React.useRef(null);
     const composedRefs = useComposedRefs(forwardedRef, ref);
     const selectValue = value ?? "";
-    const prevValue = usePrevious(selectValue);
+    const prevValueRef = React.useRef(selectValue);
+    const prevUserInteractionCountRef = React.useRef(userInteractionCount);
     const hasEmptyValueOption = Array.from(nativeOptions).some(
       (option) => (option.props.value ?? "") === ""
     );
@@ -1119,12 +1144,17 @@ var SelectBubbleInput = /* @__PURE__ */ React.forwardRef(
         "value"
       );
       const setValue = descriptor.set;
-      if (prevValue !== selectValue && setValue) {
-        const event = new Event("change", { bubbles: true });
+      const isUserInteraction = userInteractionCount !== prevUserInteractionCountRef.current;
+      prevUserInteractionCountRef.current = userInteractionCount;
+      const valueChanged = prevValueRef.current !== selectValue;
+      prevValueRef.current = selectValue;
+      const bubbles = isUserInteraction && !hasConsumerStoppedPropagationRef.current;
+      if (valueChanged && setValue) {
+        const event = new Event("change", { bubbles });
         setValue.call(select, selectValue);
         select.dispatchEvent(event);
       }
-    }, [prevValue, selectValue]);
+    }, [hasConsumerStoppedPropagationRef, selectValue, userInteractionCount]);
     return /* @__PURE__ */ jsxs(
       Primitive.select,
       {
@@ -1165,11 +1195,13 @@ function useTypeaheadSearch(onSearchChange) {
     (key) => {
       const search = searchRef.current + key;
       handleSearchChange(search);
-      (/* @__PURE__ */ __name((function updateSearch(value) {
+      function updateSearch(value) {
         searchRef.current = value;
         window.clearTimeout(timerRef.current);
         if (value !== "") timerRef.current = window.setTimeout(() => updateSearch(""), 1e3);
-      }), "updateSearch"))(search);
+      }
+      __name(updateSearch, "updateSearch");
+      updateSearch(search);
     },
     [handleSearchChange]
   );