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

package/dist/index.js

@@ -94,7 +94,6 @@ var import_react_slot = require("@radix-ui/react-slot");
 var import_react_use_callback_ref = require("@radix-ui/react-use-callback-ref");
 var import_react_use_controllable_state = require("@radix-ui/react-use-controllable-state");
 var import_react_use_layout_effect = require("@radix-ui/react-use-layout-effect");
-var import_react_use_previous = require("@radix-ui/react-use-previous");
 var import_react_visually_hidden = require("@radix-ui/react-visually-hidden");
 var import_aria_hidden = require("aria-hidden");
 var import_react_remove_scroll = require("react-remove-scroll");
@@ -155,6 +154,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;
@@ -189,6 +193,9 @@ function SelectProvider(props) {
     contentId,
     value,
     onValueChange: setValue,
+    hasConsumerStoppedPropagationRef,
+    userInteractionCount,
+    onUserInteraction,
     open,
     onOpenChange: setOpen,
     dir: direction,
@@ -246,6 +253,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);
       }
     });
@@ -297,7 +305,10 @@ var SelectTrigger = /* @__PURE__ */ React.forwardRef(
         onKeyDown: (0, import_primitive.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();
@@ -904,10 +915,13 @@ var SelectItem = /* @__PURE__ */ React.forwardRef(
     const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, handleItemRefCallback);
     const textId = (0, import_react_id.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__ */ (0, import_jsx_runtime.jsx)(
       SelectItemContextProvider,
       {
@@ -941,20 +955,20 @@ var SelectItem = /* @__PURE__ */ React.forwardRef(
                 ref: composedRefs,
                 onFocus: (0, import_primitive.composeEventHandlers)(itemProps.onFocus, () => setIsFocused(true)),
                 onBlur: (0, import_primitive.composeEventHandlers)(itemProps.onBlur, () => setIsFocused(false)),
-                onClick: (0, import_primitive.composeEventHandlers)(itemProps.onClick, () => {
+                onClick: (0, import_primitive.composeEventHandlers)(itemProps.onClick, (event) => {
                   if (disabled) {
                     return;
                   }
                   if (pointerTypeRef.current !== "mouse") {
-                    handleSelect();
+                    handleSelect(event);
                   }
                 }),
-                onPointerUp: (0, import_primitive.composeEventHandlers)(itemProps.onPointerUp, () => {
+                onPointerUp: (0, import_primitive.composeEventHandlers)(itemProps.onPointerUp, (event) => {
                   if (disabled) {
                     return;
                   }
                   if (pointerTypeRef.current === "mouse") {
-                    handleSelect();
+                    handleSelect(event);
                   }
                 }),
                 onPointerDown: (0, import_primitive.composeEventHandlers)(itemProps.onPointerDown, (event) => {
@@ -982,7 +996,7 @@ var SelectItem = /* @__PURE__ */ React.forwardRef(
                     return;
                   }
                   if (SELECTION_KEYS.includes(event.key)) {
-                    handleSelect();
+                    handleSelect(event);
                   }
                   if (event.key === " ") {
                     event.preventDefault();
@@ -1171,12 +1185,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 = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, ref);
     const selectValue = value ?? "";
-    const prevValue = (0, import_react_use_previous.usePrevious)(selectValue);
+    const prevValueRef = React.useRef(selectValue);
+    const prevUserInteractionCountRef = React.useRef(userInteractionCount);
     const hasEmptyValueOption = Array.from(nativeOptions).some(
       (option) => (option.props.value ?? "") === ""
     );
@@ -1189,12 +1214,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__ */ (0, import_jsx_runtime.jsxs)(
       import_react_primitive.Primitive.select,
       {
@@ -1235,11 +1265,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]
   );