Adjust positioning

atomiks · Oct 15, 2024 · 730f6f2 · 730f6f2
1 parent cccd3b2
commit 730f6f2
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 14 deletions.
diff --git a/docs/data/components/select/select.mdx b/docs/data/components/select/select.mdx
@@ -144,14 +144,16 @@ By default, the selected option inside the popup is aligned to the trigger eleme
 <Select.Root alignOptionToTrigger={false}>
 ```
 
-- **`alignOptionToTrigger`**: aligns the popup such that the selected option inside of it appears centered over the trigger. If there's not enough space, it falls back to standard anchoring. This method is useful as it allows the user to select the an option in a single click or "pointer cycle" (pointer down, pointer move, pointer up). This is the native behavior on macOS; the scroll arrow components must be used to ensure a single pointer cycle can be used.
+- **`alignOptionToTrigger={true}`**: aligns the popup such that the selected option inside of it appears centered over the trigger. If there's not enough space, it falls back to standard anchoring. This method is useful as it allows the user to select an option in a single click or "pointer cycle" (pointer down, pointer move, pointer up). This is the native behavior on macOS; the scroll arrow components must be used to ensure a single pointer cycle can be used.
 - **`alignOptionToTrigger={false}`**: aligns the popup to the trigger itself on its top or bottom side, which is the standard form of anchor positioning used in Tooltip, Popover, Menu, etc.
 
+<Callout type="warning">This option is always `false` on touch devices or touch input.</Callout>
+
 <Demo demo="SelectAlign" defaultCodeOpen="false" />
 
 ### Scrollable popup
 
-When disabling `alignOptionToTrigger`, the select's height needs to be manually limited by its available space using CSS.
+The select's height needs to be manually limited by its available space using CSS.
 
 This can be achieved by using the `--available-height` CSS variable:
 

diff --git a/packages/mui-base/src/Select/OptionText/SelectOptionText.tsx b/packages/mui-base/src/Select/OptionText/SelectOptionText.tsx
@@ -25,8 +25,15 @@ const SelectOptionText = React.forwardRef(function SelectOptionText(
 ) {
   const { className, render, ...otherProps } = props;
 
-  const { open, triggerElement, valueRef, popupRef, innerFallback, alignOptionToTrigger } =
-    useSelectRootContext();
+  const {
+    open,
+    triggerElement,
+    valueRef,
+    popupRef,
+    innerFallback,
+    touchModality,
+    alignOptionToTrigger,
+  } = useSelectRootContext();
   const { isPositioned, setOptionTextOffset } = useSelectPositionerContext();
   const { selected } = useSelectOptionContext();
 
@@ -38,6 +45,7 @@ const SelectOptionText = React.forwardRef(function SelectOptionText(
   useEnhancedEffect(() => {
     if (
       !alignOptionToTrigger ||
+      touchModality ||
       innerFallback ||
       !open ||
       !isPositioned ||
@@ -69,6 +77,7 @@ const SelectOptionText = React.forwardRef(function SelectOptionText(
     setOptionTextOffset,
     triggerElement,
     valueRef,
+    touchModality,
   ]);
 
   const { renderElement } = useComponentRenderer({

diff --git a/packages/mui-base/src/Select/Positioner/useSelectPositioner.tsx b/packages/mui-base/src/Select/Positioner/useSelectPositioner.tsx
@@ -52,8 +52,6 @@ export function useSelectPositioner(
       touchModality,
     },
     trackAnchor: !itemAligned,
-    collisionPadding:
-      touchModality && params.collisionPadding == null ? 20 : params.collisionPadding,
   });
 
   const getPositionerProps: useSelectPositioner.ReturnValue['getPositionerProps'] =

diff --git a/packages/mui-base/src/utils/useAnchorPositioning.ts b/packages/mui-base/src/utils/useAnchorPositioning.ts
@@ -102,7 +102,7 @@ export function useAnchorPositioning(
     innerOptions = {},
   } = params;
 
-  const standardMode = !(!innerOptions.fallback && innerMiddleware);
+  const standardMode = innerOptions.touchModality || !(!innerOptions.fallback && innerMiddleware);
   const placement = alignment === 'center' ? side : (`${side}-${alignment}` as Placement);
 
   const commonCollisionProps = {
@@ -153,13 +153,7 @@ export function useAnchorPositioning(
   }
 
   middleware.push(
-    ...(!standardMode
-      ? [innerMiddleware, shiftMiddleware]
-      : [
-          innerOptions.touchModality
-            ? shift({ crossAxis: true, ...commonCollisionProps })
-            : (false as const),
-        ]),
+    ...(!standardMode ? [innerMiddleware, shiftMiddleware] : []),
     size({
       ...commonCollisionProps,
       apply({ elements: { floating }, rects: { reference }, availableWidth, availableHeight }) {