@radix-ui/react-select 2.1.2-rc.2 → 2.1.2-rc.20

package/dist/index.mjs

@@ -51,7 +51,8 @@ var Select = (props) => {
     name,
     autoComplete,
     disabled,
-    required
+    required,
+    form
   } = props;
   const popperScope = usePopperScope(__scopeSelect);
   const [trigger, setTrigger] = React.useState(null);
@@ -69,7 +70,7 @@ var Select = (props) => {
     onChange: onValueChange
   });
   const triggerPointerDownPosRef = React.useRef(null);
-  const isFormControl = trigger ? Boolean(trigger.closest("form")) : true;
+  const isFormControl = trigger ? Boolean(trigger.closest("form")) || form : true;
   const [nativeOptionsSet, setNativeOptionsSet] = React.useState(/* @__PURE__ */ new Set());
   const nativeSelectKey = Array.from(nativeOptionsSet).map((option) => option.props.value).join(";");
   return /* @__PURE__ */ jsx(PopperPrimitive.Root, { ...popperScope, children: /* @__PURE__ */ jsxs(
@@ -120,6 +121,7 @@ var Select = (props) => {
             value,
             onChange: (event) => setValue(event.target.value),
             disabled,
+            form,
             children: [
               value === void 0 ? /* @__PURE__ */ jsx("option", { value: "" }) : null,
               Array.from(nativeOptionsSet)
@@ -141,6 +143,7 @@ var SelectTrigger = React.forwardRef(
     const isDisabled = context.disabled || disabled;
     const composedRefs = useComposedRefs(forwardedRef, context.onTriggerChange);
     const getItems = useCollection(__scopeSelect);
+    const pointerTypeRef = React.useRef("touch");
     const [searchRef, handleTypeaheadSearch, resetTypeahead] = useTypeaheadSearch((search) => {
       const enabledItems = getItems().filter((item) => !item.disabled);
       const currentItem = enabledItems.find((item) => item.value === context.value);
@@ -149,11 +152,17 @@ var SelectTrigger = React.forwardRef(
         context.onValueChange(nextItem.value);
       }
     });
-    const handleOpen = () => {
+    const handleOpen = (pointerEvent) => {
       if (!isDisabled) {
         context.onOpenChange(true);
         resetTypeahead();
       }
+      if (pointerEvent) {
+        context.triggerPointerDownPosRef.current = {
+          x: Math.round(pointerEvent.pageX),
+          y: Math.round(pointerEvent.pageY)
+        };
+      }
     };
     return /* @__PURE__ */ jsx(PopperPrimitive.Anchor, { asChild: true, ...popperScope, children: /* @__PURE__ */ jsx(
       Primitive.button,
@@ -173,18 +182,18 @@ var SelectTrigger = React.forwardRef(
         ref: composedRefs,
         onClick: composeEventHandlers(triggerProps.onClick, (event) => {
           event.currentTarget.focus();
+          if (pointerTypeRef.current !== "mouse") {
+            handleOpen(event);
+          }
         }),
         onPointerDown: composeEventHandlers(triggerProps.onPointerDown, (event) => {
+          pointerTypeRef.current = event.pointerType;
           const target = event.target;
           if (target.hasPointerCapture(event.pointerId)) {
             target.releasePointerCapture(event.pointerId);
           }
-          if (event.button === 0 && event.ctrlKey === false) {
-            handleOpen();
-            context.triggerPointerDownPosRef.current = {
-              x: Math.round(event.pageX),
-              y: Math.round(event.pageY)
-            };
+          if (event.button === 0 && event.ctrlKey === false && event.pointerType === "mouse") {
+            handleOpen(event);
             event.preventDefault();
           }
         }),
@@ -519,7 +528,15 @@ var SelectItemAlignedPosition = React.forwardRef((props, forwardedRef) => {
         const minContentWidth = triggerRect.width + leftDelta;
         const contentWidth = Math.max(minContentWidth, contentRect.width);
         const rightEdge = window.innerWidth - CONTENT_MARGIN;
-        const clampedLeft = clamp(left, [CONTENT_MARGIN, rightEdge - contentWidth]);
+        const clampedLeft = clamp(left, [
+          CONTENT_MARGIN,
+          // Prevents the content from going off the starting edge of the
+          // viewport. It may still go off the ending edge, but this can be
+          // controlled by the user since they may want to manage overflow in a
+          // specific way.
+          // https://github.com/radix-ui/primitives/issues/2049
+          Math.max(CONTENT_MARGIN, rightEdge - contentWidth)
+        ]);
         contentWrapper.style.minWidth = minContentWidth + "px";
         contentWrapper.style.left = clampedLeft + "px";
       } else {
@@ -529,7 +546,10 @@ var SelectItemAlignedPosition = React.forwardRef((props, forwardedRef) => {
         const minContentWidth = triggerRect.width + rightDelta;
         const contentWidth = Math.max(minContentWidth, contentRect.width);
         const leftEdge = window.innerWidth - CONTENT_MARGIN;
-        const clampedRight = clamp(right, [CONTENT_MARGIN, leftEdge - contentWidth]);
+        const clampedRight = clamp(right, [
+          CONTENT_MARGIN,
+          Math.max(CONTENT_MARGIN, leftEdge - contentWidth)
+        ]);
         contentWrapper.style.minWidth = minContentWidth + "px";
         contentWrapper.style.right = clampedRight + "px";
       }
@@ -713,7 +733,11 @@ var SelectViewport = React.forwardRef(
             // (independent of the scrollUpButton).
             position: "relative",
             flex: 1,
-            overflow: "auto",
+            // Viewport should only be scrollable in the vertical direction.
+            // This won't work in vertical writing modes, so we'll need to
+            // revisit this if/when that is supported
+            // https://developer.chrome.com/blog/vertical-form-controls
+            overflow: "hidden auto",
             ...viewportProps.style
           },
           onScroll: composeEventHandlers(viewportProps.onScroll, (event) => {
@@ -786,6 +810,7 @@ var SelectItem = React.forwardRef(
       (node) => contentContext.itemRefCallback?.(node, value, disabled)
     );
     const textId = useId();
+    const pointerTypeRef = React.useRef("touch");
     const handleSelect = () => {
       if (!disabled) {
         context.onValueChange(value);
@@ -830,11 +855,20 @@ var SelectItem = React.forwardRef(
                 ref: composedRefs,
                 onFocus: composeEventHandlers(itemProps.onFocus, () => setIsFocused(true)),
                 onBlur: composeEventHandlers(itemProps.onBlur, () => setIsFocused(false)),
-                onPointerUp: composeEventHandlers(itemProps.onPointerUp, handleSelect),
+                onClick: composeEventHandlers(itemProps.onClick, () => {
+                  if (pointerTypeRef.current !== "mouse") handleSelect();
+                }),
+                onPointerUp: composeEventHandlers(itemProps.onPointerUp, () => {
+                  if (pointerTypeRef.current === "mouse") handleSelect();
+                }),
+                onPointerDown: composeEventHandlers(itemProps.onPointerDown, (event) => {
+                  pointerTypeRef.current = event.pointerType;
+                }),
                 onPointerMove: composeEventHandlers(itemProps.onPointerMove, (event) => {
+                  pointerTypeRef.current = event.pointerType;
                   if (disabled) {
                     contentContext.onItemLeave?.();
-                  } else {
+                  } else if (pointerTypeRef.current === "mouse") {
                     event.currentTarget.focus({ preventScroll: true });
                   }
                 }),