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

package/dist/index.d.mts

@@ -31,6 +31,7 @@ interface SelectProps {
     autoComplete?: string;
     disabled?: boolean;
     required?: boolean;
+    form?: string;
 }
 declare const Select: React.FC<SelectProps>;
 type PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primitive.button>;

package/dist/index.d.ts

@@ -31,6 +31,7 @@ interface SelectProps {
     autoComplete?: string;
     disabled?: boolean;
     required?: boolean;
+    form?: string;
 }
 declare const Select: React.FC<SelectProps>;
 type PrimitiveButtonProps = React.ComponentPropsWithoutRef<typeof Primitive.button>;

package/dist/index.js

@@ -118,7 +118,8 @@ var Select = (props) => {
     name,
     autoComplete,
     disabled,
-    required
+    required,
+    form
   } = props;
   const popperScope = usePopperScope(__scopeSelect);
   const [trigger, setTrigger] = React.useState(null);
@@ -136,7 +137,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__ */ (0, import_jsx_runtime.jsx)(PopperPrimitive.Root, { ...popperScope, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -187,6 +188,7 @@ var Select = (props) => {
             value,
             onChange: (event) => setValue(event.target.value),
             disabled,
+            form,
             children: [
               value === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "" }) : null,
               Array.from(nativeOptionsSet)
@@ -208,6 +210,7 @@ var SelectTrigger = React.forwardRef(
     const isDisabled = context.disabled || disabled;
     const composedRefs = (0, import_react_compose_refs.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);
@@ -216,11 +219,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__ */ (0, import_jsx_runtime.jsx)(PopperPrimitive.Anchor, { asChild: true, ...popperScope, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_react_primitive.Primitive.button,
@@ -240,18 +249,18 @@ var SelectTrigger = React.forwardRef(
         ref: composedRefs,
         onClick: (0, import_primitive.composeEventHandlers)(triggerProps.onClick, (event) => {
           event.currentTarget.focus();
+          if (pointerTypeRef.current !== "mouse") {
+            handleOpen(event);
+          }
         }),
         onPointerDown: (0, import_primitive.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();
           }
         }),
@@ -586,7 +595,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 = (0, import_number.clamp)(left, [CONTENT_MARGIN, rightEdge - contentWidth]);
+        const clampedLeft = (0, import_number.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 {
@@ -596,7 +613,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 = (0, import_number.clamp)(right, [CONTENT_MARGIN, leftEdge - contentWidth]);
+        const clampedRight = (0, import_number.clamp)(right, [
+          CONTENT_MARGIN,
+          Math.max(CONTENT_MARGIN, leftEdge - contentWidth)
+        ]);
         contentWrapper.style.minWidth = minContentWidth + "px";
         contentWrapper.style.right = clampedRight + "px";
       }
@@ -780,7 +800,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: (0, import_primitive.composeEventHandlers)(viewportProps.onScroll, (event) => {
@@ -853,6 +877,7 @@ var SelectItem = React.forwardRef(
       (node) => contentContext.itemRefCallback?.(node, value, disabled)
     );
     const textId = (0, import_react_id.useId)();
+    const pointerTypeRef = React.useRef("touch");
     const handleSelect = () => {
       if (!disabled) {
         context.onValueChange(value);
@@ -897,11 +922,20 @@ var SelectItem = React.forwardRef(
                 ref: composedRefs,
                 onFocus: (0, import_primitive.composeEventHandlers)(itemProps.onFocus, () => setIsFocused(true)),
                 onBlur: (0, import_primitive.composeEventHandlers)(itemProps.onBlur, () => setIsFocused(false)),
-                onPointerUp: (0, import_primitive.composeEventHandlers)(itemProps.onPointerUp, handleSelect),
+                onClick: (0, import_primitive.composeEventHandlers)(itemProps.onClick, () => {
+                  if (pointerTypeRef.current !== "mouse") handleSelect();
+                }),
+                onPointerUp: (0, import_primitive.composeEventHandlers)(itemProps.onPointerUp, () => {
+                  if (pointerTypeRef.current === "mouse") handleSelect();
+                }),
+                onPointerDown: (0, import_primitive.composeEventHandlers)(itemProps.onPointerDown, (event) => {
+                  pointerTypeRef.current = event.pointerType;
+                }),
                 onPointerMove: (0, import_primitive.composeEventHandlers)(itemProps.onPointerMove, (event) => {
+                  pointerTypeRef.current = event.pointerType;
                   if (disabled) {
                     contentContext.onItemLeave?.();
-                  } else {
+                  } else if (pointerTypeRef.current === "mouse") {
                     event.currentTarget.focus({ preventScroll: true });
                   }
                 }),