[popups] Enable scroll lock on touch when modal

docs/src/app/(private)/experiments/popover/popovers.tsx

@@ -48,6 +48,13 @@ const contents = [
   </React.Fragment>,
 ];
 
+function PopoverWithSettings<Payload>(
+  props: Popover.Root.Props<Payload> & React.RefAttributes<HTMLDivElement>,
+) {
+  const { settings } = useExperimentSettings<Settings>();
+  return <Popover.Root modal={settings.modal} {...props} />;
+}
+
 export default function Popovers() {
   const { settings } = useExperimentSettings<Settings>();
 
@@ -68,37 +75,37 @@ export default function Popovers() {
       <h1>Popovers</h1>
       <h2>Uncontrolled, single trigger</h2>
       <div className={styles.Container}>
-        <Popover.Root>
+        <PopoverWithSettings>
           <StyledTrigger />
           {renderPopoverContent(0, settings)}
-        </Popover.Root>
-        <Popover.Root>
+        </PopoverWithSettings>
+        <PopoverWithSettings>
           <StyledTrigger />
           {renderPopoverContent(1, settings)}
-        </Popover.Root>
-        <Popover.Root>
+        </PopoverWithSettings>
+        <PopoverWithSettings>
           <StyledTrigger />
           {renderPopoverContent(2, settings)}
-        </Popover.Root>
+        </PopoverWithSettings>
       </div>
 
       <h2>Controlled, single trigger</h2>
       <div className={styles.Container}>
-        <Popover.Root
+        <PopoverWithSettings
           open={singleTriggerOpen}
           onOpenChange={(nextOpen) => setSingleTriggerOpen(nextOpen)}
         >
           <StyledTrigger />
           {renderPopoverContent(0, settings)}
-        </Popover.Root>
+        </PopoverWithSettings>
         <button type="button" className={styles.Button} onClick={() => setSingleTriggerOpen(true)}>
           Open externally
         </button>
       </div>
 
       <h2>Uncontrolled, multiple triggers within Root</h2>
       <div className={styles.Container}>
-        <Popover.Root>
+        <PopoverWithSettings>
           {({ payload }) => (
             <React.Fragment>
               <StyledTrigger payload={0} />
@@ -107,12 +114,12 @@ export default function Popovers() {
               {renderPopoverContent(payload as number, settings)}
             </React.Fragment>
           )}
-        </Popover.Root>
+        </PopoverWithSettings>
       </div>
 
       <h2>Controlled, multiple triggers within Root</h2>
       <div className={styles.Container}>
-        <Popover.Root
+        <PopoverWithSettings
           open={controlledWithinRootOpen}
           onOpenChange={(open, eventDetails) => {
             setControlledWithinRootOpen(open);
@@ -128,7 +135,7 @@ export default function Popovers() {
               {renderPopoverContent(payload as number, settings)}
             </React.Fragment>
           )}
-        </Popover.Root>
+        </PopoverWithSettings>
         <button
           type="button"
           className={styles.Button}
@@ -218,7 +225,13 @@ function StyledPopover(props: StyledPopoverProps<number>) {
   const { settings } = useExperimentSettings<Settings>();
 
   return (
-    <Popover.Root handle={handle} open={open} onOpenChange={onOpenChange} triggerId={triggerId}>
+    <Popover.Root
+      handle={handle}
+      open={open}
+      onOpenChange={onOpenChange}
+      triggerId={triggerId}
+      modal={settings.modal}
+    >
       {({ payload }) => renderPopoverContent(payload, settings)}
     </Popover.Root>
   );

packages/react/src/combobox/positioner/ComboboxPositioner.tsx

@@ -54,7 +54,6 @@ export const ComboboxPositioner = React.forwardRef(function ComboboxPositioner(
   const modal = useStore(store, selectors.modal);
   const open = useStore(store, selectors.open);
   const mounted = useStore(store, selectors.mounted);
-  const openMethod = useStore(store, selectors.openMethod);
   const triggerElement = useStore(store, selectors.triggerElement);
   const inputElement = useStore(store, selectors.inputElement);
   const inputInsidePopup = useStore(store, selectors.inputInsidePopup);
@@ -81,7 +80,7 @@ export const ComboboxPositioner = React.forwardRef(function ComboboxPositioner(
     lazyFlip: true,
   });
 
-  useScrollLock(open && modal && openMethod !== 'touch', triggerElement);
+  useScrollLock(open && modal, triggerElement);
 
   const defaultProps: HTMLProps = React.useMemo(() => {
     const style: React.CSSProperties = {

packages/react/src/menu/root/MenuRoot.tsx

@@ -167,18 +167,13 @@ export const MenuRoot: React.FC<MenuRoot.Props> = function MenuRoot(props) {
   }, [allowOutsidePressDismissalTimeout, open, parent.type]);
 
   const { mounted, setMounted, transitionStatus } = useTransitionStatus(open);
+
   store.useSyncedValues({ mounted, transitionStatus });
 
-  const {
-    openMethod,
-    triggerProps: interactionTypeProps,
-    reset: resetOpenInteractionType,
-  } = useOpenInteractionType(open);
-
-  useScrollLock(
-    open && modal && lastOpenChangeReason !== REASONS.triggerHover && openMethod !== 'touch',
-    positionerElement,
-  );
+  const { triggerProps: interactionTypeProps, reset: resetOpenInteractionType } =
+    useOpenInteractionType(open);
+
+  useScrollLock(open && modal && lastOpenChangeReason !== REASONS.triggerHover, positionerElement);
 
   useIsoLayoutEffect(() => {
     if (!open && !hoverEnabled) {

packages/react/src/popover/root/PopoverRoot.tsx

@@ -52,7 +52,6 @@ function PopoverRootComponent<Payload>({ props }: { props: PopoverRoot.Props<Pay
   const activeTriggerElement = store.useState('activeTriggerElement');
   const payload = store.useState('payload') as Payload | undefined;
   const openReason = store.useState('openReason');
-  const openMethod = store.useState('openMethod');
 
   const { mounted, setMounted, transitionStatus } = useTransitionStatus(open);
 
@@ -82,10 +81,7 @@ function PopoverRootComponent<Payload>({ props }: { props: PopoverRoot.Props<Pay
     }
   }, [store, resolvedTriggerId, open]);
 
-  useScrollLock(
-    open && modal === true && openReason !== REASONS.triggerHover && openMethod !== 'touch',
-    positionerElement,
-  );
+  useScrollLock(open && modal === true && openReason !== REASONS.triggerHover, positionerElement);
 
   React.useEffect(() => {
     if (!open) {

packages/react/src/select/positioner/SelectPositioner.tsx

@@ -97,7 +97,7 @@ export const SelectPositioner = React.forwardRef(function SelectPositioner(
 
   React.useImperativeHandle(alignItemWithTriggerActiveRef, () => alignItemWithTriggerActive);
 
-  useScrollLock((alignItemWithTriggerActive || modal) && open && !touchModality, triggerElement);
+  useScrollLock((alignItemWithTriggerActive || modal) && open, triggerElement);
 
   const positioning = useAnchorPositioning({
     anchor,