@telus-uds/components-base 3.14.1 → 3.15.0

package/CHANGELOG.md

@@ -1,16 +1,21 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Fri, 05 Sep 2025 17:37:54 GMT and should not be manually modified.
+This log was last generated on Wed, 10 Sep 2025 05:55:42 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## 3.14.1
+## 3.15.0
 
-Fri, 05 Sep 2025 17:37:54 GMT
+Wed, 10 Sep 2025 05:55:42 GMT
+
+### Minor changes
+
+- `MultiSelectFilter`: Positioned fixed instead of absolute on web now (oscar.palencia@telus.com)
 
 ### Patches
 
-- `FlexGrid`: change default limitWidth value prop to true (guillermo.peitzner@telus.com)
+- `Select`: incorrect position rendering dropdown in mobile devices fixed (35577399+JoshHC@users.noreply.github.com)
+- `Expand-Collapse`: Fixing content rendering problems when nesting panels (oscar.palencia@telus.com)
 
 ## 3.13.0
 

package/lib/cjs/ExpandCollapse/Panel.js

@@ -128,6 +128,10 @@ const ExpandCollapsePanel = /*#__PURE__*/_react.default.forwardRef((_ref5, ref)
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('ExpandCollapsePanel', tokens, variant, {
     expanded: isExpanded
   });
+
+  // on mobile devices we require a scroll buffer equal to the font size
+  // to avoid triggering scrolling unnecessarily
+  const mobileScrollBuffer = _Platform.default.OS === 'web' ? 0 : selectTextStyles(themeTokens)?.fontSize;
   const handleControlPress = event => {
     onToggle?.(panelId, event);
     if (onPress) onPress(panelId, event);
@@ -139,7 +143,7 @@ const ExpandCollapsePanel = /*#__PURE__*/_react.default.forwardRef((_ref5, ref)
       } = {}
     } = event.nativeEvent;
     if (_Platform.default.OS === 'web' || _Platform.default.OS !== 'web' && containerHeight === null) {
-      setContainerHeight(height);
+      setContainerHeight(height + mobileScrollBuffer);
     }
   };
   const [animatedStyles, animatedRef] = (0, _utils.useVerticalExpandAnimation)({
@@ -203,7 +207,7 @@ const ExpandCollapsePanel = /*#__PURE__*/_react.default.forwardRef((_ref5, ref)
           children: children
         }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollView.default, {
           onContentSizeChange: (_, height) => {
-            setContainerHeight(height);
+            setContainerHeight(height + mobileScrollBuffer);
           },
           style: selectContainerStyles(themeTokens),
           accessibilityLabel: subPanelAccessibilityLabel,
@@ -216,7 +220,16 @@ const ExpandCollapsePanel = /*#__PURE__*/_react.default.forwardRef((_ref5, ref)
 ExpandCollapsePanel.displayName = 'ExpandCollapsePanel';
 const staticStyles = _StyleSheet.default.create({
   container: {
-    flex: 1,
+    ..._Platform.default.select({
+      web: {
+        flexGrow: 1,
+        flexshrink: 1,
+        flexbasis: 'auto'
+      },
+      default: {
+        flex: 1
+      }
+    }),
     justifyContent: 'flex-start'
   },
   panelContainer: {

package/lib/cjs/FlexGrid/FlexGrid.js

@@ -52,12 +52,15 @@ const resolveContentMaxWidth = (contentMinWidthValue, responsiveWidth) => {
  */
 const getMaxWidthForViewport = (viewportKey, limitWidth, contentMinWidth, maxWidth) => {
   if (limitWidth) {
-    return _systemConstants.viewports.map.get(viewportKey === 'xs' ? 'sm' : viewportKey);
+    if (viewportKey === 'xs') {
+      return null;
+    }
+    return _systemConstants.viewports.map.get(viewportKey);
   }
   if (contentMinWidth) {
     return maxWidth;
   }
-  return viewportKey === 'xl' ? _systemConstants.viewports.map.get('xl') : null;
+  return null;
 };
 
 /**

package/lib/cjs/MultiSelectFilter/MultiSelectFilter.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _portal = require("@gorhom/portal");
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _Dimensions = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Dimensions"));
@@ -214,6 +215,20 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
     setIsOpen(false);
     onCancel();
   };
+  const appRootRef = _react.default.useRef(null);
+  const [rootOffsets, setRootOffsets] = _react.default.useState(null);
+  _react.default.useEffect(() => {
+    if (rootOffsets) return;
+    appRootRef.current?.measureInWindow((x, y) => {
+      // Only set offsets if they are positive
+      // this is because we want to avoid negative offsets that could cause
+      // the dropdown to be positioned incorrectly in some situations
+      if (y > 0) setRootOffsets({
+        horizontal: x,
+        vertical: y
+      });
+    });
+  }, [isOpen, rootOffsets]);
   const {
     align,
     offsets
@@ -230,7 +245,8 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
         left: 'left'
       },
       offsets: {
-        vertical: 4
+        vertical: 4 - (rootOffsets?.vertical || 0),
+        horizontal: -rootOffsets?.horizontal || 0
       }
     }
   });
@@ -367,7 +383,12 @@ const MultiSelectFilter = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) =>
     })]
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.ButtonDropdown, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_portal.Portal, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        ref: appRootRef,
+        style: styles.appRootRef
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.ButtonDropdown, {
       ref: sourceRef,
       ...pressHandlers,
       value: isOpen,
@@ -448,6 +469,11 @@ const styles = _StyleSheet.default.create({
   },
   scrollContainer: {
     padding: 1
+  },
+  appRootRef: {
+    position: 'absolute',
+    top: 0,
+    left: 0
   }
 });
 

package/lib/cjs/Select/Select.js

@@ -9,6 +9,7 @@ var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Vi
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _systemConstants = require("@telus-uds/system-constants");
 var _ThemeProvider = require("../ThemeProvider");
 var _utils = require("../utils");
 var _Picker = _interopRequireDefault(require("./Picker"));
@@ -55,7 +56,15 @@ const selectInputStyles = (_ref, themeOptions, inactive) => {
       // since iOS Safari needs a prefix
       outline: 'none',
       cursor: inactive ? 'not-allowed' : undefined,
-      opacity: inactive ? 1 : undefined // override Chrome's default fadeout of a disabled select
+      opacity: inactive ? 1 : undefined,
+      // override Chrome's default fadeout of a disabled select
+      // Enhanced fix for mobile dropdown positioning: restore native appearance on touch devices
+      // Using multiple media queries and higher specificity to ensure it works in all contexts
+      [`@media (pointer: coarse), (maxWidth: ${_systemConstants.viewports.map.get(_systemConstants.viewports.md)}px) and (hover: none)`]: {
+        appearance: 'auto !important',
+        WebkitAppearance: 'auto !important',
+        backgroundImage: 'none !important'
+      }
     }
   });
   let paddingWithIcons = paddingRight;

package/lib/cjs/utils/useOverlaidPosition.js

@@ -9,7 +9,7 @@ var _Dimensions = _interopRequireDefault(require("react-native-web/dist/cjs/expo
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _lodash = _interopRequireDefault(require("lodash.debounce"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const DEBOUNCE_DELAY = 100;
+const DEBOUNCE_DELAY = 300;
 const adjustHorizontalToFit = (initialOffset, windowWidth, sourceWidth) => {
   const offset = Math.max(0, initialOffset);
   const otherEdgeOverflow = Math.max(0, offset + sourceWidth - windowWidth);
@@ -71,34 +71,36 @@ function getOverlaidPosition(_ref2) {
 
   // Will have top, bottom, left and/or right offsets depending on `align`
   const positioning = {};
+  const verticalOffset = offsets.vertical ?? 0;
+  const horizontalOffset = offsets.horizontal ?? 0;
   if (align.top) positioning.top = getPosition({
     edge: getEdgeType(align, 'top'),
-    fromEdge: sourceLayout.y + scrollY + (offsets.vertical ?? 0),
+    fromEdge: sourceLayout.y + scrollY + verticalOffset,
     sourceSize: sourceLayout.height
   });
   if (align.middle) positioning.top = getPosition({
     edge: getEdgeType(align, 'middle'),
-    fromEdge: sourceLayout.y + scrollY + (offsets.vertical ?? 0) - targetDimensions.height / 2,
+    fromEdge: sourceLayout.y + scrollY + verticalOffset - targetDimensions.height / 2,
     sourceSize: sourceLayout.height
   });
   if (align.bottom) positioning.bottom = getPosition({
     edge: getEdgeType(align, 'bottom'),
-    fromEdge: windowDimensions.height - (sourceLayout.y + scrollY + sourceLayout.height - (offsets.vertical ?? 0)),
+    fromEdge: windowDimensions.height - (sourceLayout.y + scrollY + sourceLayout.height - verticalOffset),
     sourceSize: sourceLayout.height
   });
   if (align.left) positioning.left = getPosition({
     edge: getEdgeType(align, 'left'),
-    fromEdge: sourceLayout.x + scrollX + (offsets.horizontal ?? 0),
+    fromEdge: sourceLayout.x + scrollX + horizontalOffset,
     sourceSize: sourceLayout.width
   });
   if (align.center) positioning.left = getPosition({
     edge: getEdgeType(align, 'center'),
-    fromEdge: sourceLayout.x + scrollX + (offsets.horizontal ?? 0) - targetDimensions.width / 2,
+    fromEdge: sourceLayout.x + scrollX + horizontalOffset - targetDimensions.width / 2,
     sourceSize: sourceLayout.width
   });
   if (align.right) positioning.right = getPosition({
     edge: getEdgeType(align, 'right'),
-    fromEdge: windowDimensions.width - (sourceLayout.x + scrollX + sourceLayout.width - (offsets.horizontal ?? 0)),
+    fromEdge: windowDimensions.width - (sourceLayout.x + scrollX + sourceLayout.width - horizontalOffset),
     sourceSize: sourceLayout.width
   });
   if (!(align.left && align.right)) {

package/lib/esm/ExpandCollapse/Panel.js

@@ -121,6 +121,10 @@ const ExpandCollapsePanel = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   const themeTokens = useThemeTokens('ExpandCollapsePanel', tokens, variant, {
     expanded: isExpanded
   });
+
+  // on mobile devices we require a scroll buffer equal to the font size
+  // to avoid triggering scrolling unnecessarily
+  const mobileScrollBuffer = Platform.OS === 'web' ? 0 : selectTextStyles(themeTokens)?.fontSize;
   const handleControlPress = event => {
     onToggle?.(panelId, event);
     if (onPress) onPress(panelId, event);
@@ -132,7 +136,7 @@ const ExpandCollapsePanel = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
       } = {}
     } = event.nativeEvent;
     if (Platform.OS === 'web' || Platform.OS !== 'web' && containerHeight === null) {
-      setContainerHeight(height);
+      setContainerHeight(height + mobileScrollBuffer);
     }
   };
   const [animatedStyles, animatedRef] = useVerticalExpandAnimation({
@@ -196,7 +200,7 @@ const ExpandCollapsePanel = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
           children: children
         }) : /*#__PURE__*/_jsx(ScrollView, {
           onContentSizeChange: (_, height) => {
-            setContainerHeight(height);
+            setContainerHeight(height + mobileScrollBuffer);
           },
           style: selectContainerStyles(themeTokens),
           accessibilityLabel: subPanelAccessibilityLabel,
@@ -209,7 +213,16 @@ const ExpandCollapsePanel = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
 ExpandCollapsePanel.displayName = 'ExpandCollapsePanel';
 const staticStyles = StyleSheet.create({
   container: {
-    flex: 1,
+    ...Platform.select({
+      web: {
+        flexGrow: 1,
+        flexshrink: 1,
+        flexbasis: 'auto'
+      },
+      default: {
+        flex: 1
+      }
+    }),
     justifyContent: 'flex-start'
   },
   panelContainer: {

package/lib/esm/FlexGrid/FlexGrid.js

@@ -45,12 +45,15 @@ const resolveContentMaxWidth = (contentMinWidthValue, responsiveWidth) => {
  */
 const getMaxWidthForViewport = (viewportKey, limitWidth, contentMinWidth, maxWidth) => {
   if (limitWidth) {
-    return viewports.map.get(viewportKey === 'xs' ? 'sm' : viewportKey);
+    if (viewportKey === 'xs') {
+      return null;
+    }
+    return viewports.map.get(viewportKey);
   }
   if (contentMinWidth) {
     return maxWidth;
   }
-  return viewportKey === 'xl' ? viewports.map.get('xl') : null;
+  return null;
 };
 
 /**

package/lib/esm/MultiSelectFilter/MultiSelectFilter.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Portal } from '@gorhom/portal';
 import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import Dimensions from "react-native-web/dist/exports/Dimensions";
@@ -207,6 +208,20 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     setIsOpen(false);
     onCancel();
   };
+  const appRootRef = React.useRef(null);
+  const [rootOffsets, setRootOffsets] = React.useState(null);
+  React.useEffect(() => {
+    if (rootOffsets) return;
+    appRootRef.current?.measureInWindow((x, y) => {
+      // Only set offsets if they are positive
+      // this is because we want to avoid negative offsets that could cause
+      // the dropdown to be positioned incorrectly in some situations
+      if (y > 0) setRootOffsets({
+        horizontal: x,
+        vertical: y
+      });
+    });
+  }, [isOpen, rootOffsets]);
   const {
     align,
     offsets
@@ -223,7 +238,8 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
         left: 'left'
       },
       offsets: {
-        vertical: 4
+        vertical: 4 - (rootOffsets?.vertical || 0),
+        horizontal: -rootOffsets?.horizontal || 0
       }
     }
   });
@@ -360,7 +376,12 @@ const MultiSelectFilter = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     })]
   });
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(ButtonDropdown, {
+    children: [/*#__PURE__*/_jsx(Portal, {
+      children: /*#__PURE__*/_jsx(View, {
+        ref: appRootRef,
+        style: styles.appRootRef
+      })
+    }), /*#__PURE__*/_jsx(ButtonDropdown, {
       ref: sourceRef,
       ...pressHandlers,
       value: isOpen,
@@ -441,6 +462,11 @@ const styles = StyleSheet.create({
   },
   scrollContainer: {
     padding: 1
+  },
+  appRootRef: {
+    position: 'absolute',
+    top: 0,
+    left: 0
   }
 });
 

package/lib/esm/Select/Select.js

@@ -3,6 +3,7 @@ import View from "react-native-web/dist/exports/View";
 import Platform from "react-native-web/dist/exports/Platform";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import PropTypes from 'prop-types';
+import { viewports } from '@telus-uds/system-constants';
 import { applyTextStyles, useThemeTokens, applyOuterBorder, useTheme } from '../ThemeProvider';
 import { a11yProps, componentPropType, getTokensPropType, inputSupportsProps, selectSystemProps, useInputValue, variantProp, viewProps, htmlAttrs } from '../utils';
 import Picker from './Picker';
@@ -48,7 +49,15 @@ const selectInputStyles = (_ref, themeOptions, inactive) => {
       // since iOS Safari needs a prefix
       outline: 'none',
       cursor: inactive ? 'not-allowed' : undefined,
-      opacity: inactive ? 1 : undefined // override Chrome's default fadeout of a disabled select
+      opacity: inactive ? 1 : undefined,
+      // override Chrome's default fadeout of a disabled select
+      // Enhanced fix for mobile dropdown positioning: restore native appearance on touch devices
+      // Using multiple media queries and higher specificity to ensure it works in all contexts
+      [`@media (pointer: coarse), (maxWidth: ${viewports.map.get(viewports.md)}px) and (hover: none)`]: {
+        appearance: 'auto !important',
+        WebkitAppearance: 'auto !important',
+        backgroundImage: 'none !important'
+      }
     }
   });
   let paddingWithIcons = paddingRight;

package/lib/esm/utils/useOverlaidPosition.js

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import Dimensions from "react-native-web/dist/exports/Dimensions";
 import Platform from "react-native-web/dist/exports/Platform";
 import debounce from 'lodash.debounce';
-const DEBOUNCE_DELAY = 100;
+const DEBOUNCE_DELAY = 300;
 const adjustHorizontalToFit = (initialOffset, windowWidth, sourceWidth) => {
   const offset = Math.max(0, initialOffset);
   const otherEdgeOverflow = Math.max(0, offset + sourceWidth - windowWidth);
@@ -64,34 +64,36 @@ function getOverlaidPosition(_ref2) {
 
   // Will have top, bottom, left and/or right offsets depending on `align`
   const positioning = {};
+  const verticalOffset = offsets.vertical ?? 0;
+  const horizontalOffset = offsets.horizontal ?? 0;
   if (align.top) positioning.top = getPosition({
     edge: getEdgeType(align, 'top'),
-    fromEdge: sourceLayout.y + scrollY + (offsets.vertical ?? 0),
+    fromEdge: sourceLayout.y + scrollY + verticalOffset,
     sourceSize: sourceLayout.height
   });
   if (align.middle) positioning.top = getPosition({
     edge: getEdgeType(align, 'middle'),
-    fromEdge: sourceLayout.y + scrollY + (offsets.vertical ?? 0) - targetDimensions.height / 2,
+    fromEdge: sourceLayout.y + scrollY + verticalOffset - targetDimensions.height / 2,
     sourceSize: sourceLayout.height
   });
   if (align.bottom) positioning.bottom = getPosition({
     edge: getEdgeType(align, 'bottom'),
-    fromEdge: windowDimensions.height - (sourceLayout.y + scrollY + sourceLayout.height - (offsets.vertical ?? 0)),
+    fromEdge: windowDimensions.height - (sourceLayout.y + scrollY + sourceLayout.height - verticalOffset),
     sourceSize: sourceLayout.height
   });
   if (align.left) positioning.left = getPosition({
     edge: getEdgeType(align, 'left'),
-    fromEdge: sourceLayout.x + scrollX + (offsets.horizontal ?? 0),
+    fromEdge: sourceLayout.x + scrollX + horizontalOffset,
     sourceSize: sourceLayout.width
   });
   if (align.center) positioning.left = getPosition({
     edge: getEdgeType(align, 'center'),
-    fromEdge: sourceLayout.x + scrollX + (offsets.horizontal ?? 0) - targetDimensions.width / 2,
+    fromEdge: sourceLayout.x + scrollX + horizontalOffset - targetDimensions.width / 2,
     sourceSize: sourceLayout.width
   });
   if (align.right) positioning.right = getPosition({
     edge: getEdgeType(align, 'right'),
-    fromEdge: windowDimensions.width - (sourceLayout.x + scrollX + sourceLayout.width - (offsets.horizontal ?? 0)),
+    fromEdge: windowDimensions.width - (sourceLayout.x + scrollX + sourceLayout.width - horizontalOffset),
     sourceSize: sourceLayout.width
   });
   if (!(align.left && align.right)) {

package/lib/package.json

@@ -84,6 +84,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.14.1",
+  "version": "3.15.0",
   "types": "types/index.d.ts"
 }

package/package.json

@@ -84,6 +84,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.14.1",
+  "version": "3.15.0",
   "types": "types/index.d.ts"
 }

package/src/ExpandCollapse/Panel.jsx

@@ -116,6 +116,10 @@ const ExpandCollapsePanel = React.forwardRef(
       expanded: isExpanded
     })
 
+    // on mobile devices we require a scroll buffer equal to the font size
+    // to avoid triggering scrolling unnecessarily
+    const mobileScrollBuffer = Platform.OS === 'web' ? 0 : selectTextStyles(themeTokens)?.fontSize
+
     const handleControlPress = (event) => {
       onToggle?.(panelId, event)
       if (onPress) onPress(panelId, event)
@@ -124,7 +128,7 @@ const ExpandCollapsePanel = React.forwardRef(
     const onContainerLayout = (event) => {
       const { layout: { height = 0 } = {} } = event.nativeEvent
       if (Platform.OS === 'web' || (Platform.OS !== 'web' && containerHeight === null)) {
-        setContainerHeight(height)
+        setContainerHeight(height + mobileScrollBuffer)
       }
     }
 
@@ -208,7 +212,7 @@ const ExpandCollapsePanel = React.forwardRef(
             ) : (
               <ScrollView
                 onContentSizeChange={(_, height) => {
-                  setContainerHeight(height)
+                  setContainerHeight(height + mobileScrollBuffer)
                 }}
                 style={selectContainerStyles(themeTokens)}
                 accessibilityLabel={subPanelAccessibilityLabel}
@@ -226,7 +230,14 @@ ExpandCollapsePanel.displayName = 'ExpandCollapsePanel'
 
 const staticStyles = StyleSheet.create({
   container: {
-    flex: 1,
+    ...Platform.select({
+      web: {
+        flexGrow: 1,
+        flexshrink: 1,
+        flexbasis: 'auto'
+      },
+      default: { flex: 1 }
+    }),
     justifyContent: 'flex-start'
   },
   panelContainer: {

package/src/FlexGrid/FlexGrid.jsx

@@ -60,14 +60,17 @@ const resolveContentMaxWidth = (contentMinWidthValue, responsiveWidth) => {
  */
 const getMaxWidthForViewport = (viewportKey, limitWidth, contentMinWidth, maxWidth) => {
   if (limitWidth) {
-    return viewports.map.get(viewportKey === 'xs' ? 'sm' : viewportKey)
+    if (viewportKey === 'xs') {
+      return null
+    }
+    return viewports.map.get(viewportKey)
   }
 
   if (contentMinWidth) {
     return maxWidth
   }
 
-  return viewportKey === 'xl' ? viewports.map.get('xl') : null
+  return null
 }
 
 /**

package/src/MultiSelectFilter/MultiSelectFilter.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-
+import { Portal } from '@gorhom/portal'
 import { View, StyleSheet, Dimensions, SafeAreaView, Platform, ScrollView } from 'react-native'
 import { useThemeTokens, useThemeTokensCallback, applyTextStyles } from '../ThemeProvider'
 import {
@@ -215,11 +215,27 @@ const MultiSelectFilter = React.forwardRef(
       onCancel()
     }
 
+    const appRootRef = React.useRef(null)
+    const [rootOffsets, setRootOffsets] = React.useState(null)
+
+    React.useEffect(() => {
+      if (rootOffsets) return
+      appRootRef.current?.measureInWindow((x, y) => {
+        // Only set offsets if they are positive
+        // this is because we want to avoid negative offsets that could cause
+        // the dropdown to be positioned incorrectly in some situations
+        if (y > 0) setRootOffsets({ horizontal: x, vertical: y })
+      })
+    }, [isOpen, rootOffsets])
+
     const { align, offsets } = useResponsiveProp({
       xs: { align: { top: 'top', left: 'left' } },
       sm: {
         align: { top: 'bottom', left: 'left' },
-        offsets: { vertical: 4 }
+        offsets: {
+          vertical: 4 - (rootOffsets?.vertical || 0),
+          horizontal: -rootOffsets?.horizontal || 0
+        }
       }
     })
 
@@ -345,6 +361,14 @@ const MultiSelectFilter = React.forwardRef(
 
     return (
       <>
+        {/* 
+        This View is rendered inside a Portal to determine the application's root position.
+        Capturing it is crucial to determine offsets to position the Modal correctly, preventing
+        misalignment that can occur when the Portal does not render the Modal at the body level.
+        */}
+        <Portal>
+          <View ref={appRootRef} style={styles.appRootRef} />
+        </Portal>
         <ButtonDropdown
           ref={sourceRef}
           key={id}
@@ -434,6 +458,11 @@ const styles = StyleSheet.create({
   },
   scrollContainer: {
     padding: 1
+  },
+  appRootRef: {
+    position: 'absolute',
+    top: 0,
+    left: 0
   }
 })
 

package/src/Select/Select.jsx

@@ -2,6 +2,7 @@ import React from 'react'
 
 import { View, Platform, StyleSheet } from 'react-native'
 import PropTypes from 'prop-types'
+import { viewports } from '@telus-uds/system-constants'
 import { applyTextStyles, useThemeTokens, applyOuterBorder, useTheme } from '../ThemeProvider'
 import {
   a11yProps,
@@ -69,7 +70,16 @@ const selectInputStyles = (
       WebkitAppearance: 'none', // since iOS Safari needs a prefix
       outline: 'none',
       cursor: inactive ? 'not-allowed' : undefined,
-      opacity: inactive ? 1 : undefined // override Chrome's default fadeout of a disabled select
+      opacity: inactive ? 1 : undefined, // override Chrome's default fadeout of a disabled select
+      // Enhanced fix for mobile dropdown positioning: restore native appearance on touch devices
+      // Using multiple media queries and higher specificity to ensure it works in all contexts
+      [`@media (pointer: coarse), (maxWidth: ${viewports.map.get(
+        viewports.md
+      )}px) and (hover: none)`]: {
+        appearance: 'auto !important',
+        WebkitAppearance: 'auto !important',
+        backgroundImage: 'none !important'
+      }
     }
   })
 

package/src/utils/useOverlaidPosition.js

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useRef, useState } from 'react'
 import { Dimensions, Platform } from 'react-native'
 import debounce from 'lodash.debounce'
 
-const DEBOUNCE_DELAY = 100
+const DEBOUNCE_DELAY = 300
 
 const adjustHorizontalToFit = (initialOffset, windowWidth, sourceWidth) => {
   const offset = Math.max(0, initialOffset)
@@ -62,45 +62,46 @@ function getOverlaidPosition({
   // Will have top, bottom, left and/or right offsets depending on `align`
   const positioning = {}
 
+  const verticalOffset = offsets.vertical ?? 0
+  const horizontalOffset = offsets.horizontal ?? 0
+
   if (align.top)
     positioning.top = getPosition({
       edge: getEdgeType(align, 'top'),
-      fromEdge: sourceLayout.y + scrollY + (offsets.vertical ?? 0),
+      fromEdge: sourceLayout.y + scrollY + verticalOffset,
       sourceSize: sourceLayout.height
     })
   if (align.middle)
     positioning.top = getPosition({
       edge: getEdgeType(align, 'middle'),
-      fromEdge: sourceLayout.y + scrollY + (offsets.vertical ?? 0) - targetDimensions.height / 2,
+      fromEdge: sourceLayout.y + scrollY + verticalOffset - targetDimensions.height / 2,
       sourceSize: sourceLayout.height
     })
   if (align.bottom)
     positioning.bottom = getPosition({
       edge: getEdgeType(align, 'bottom'),
       fromEdge:
-        windowDimensions.height -
-        (sourceLayout.y + scrollY + sourceLayout.height - (offsets.vertical ?? 0)),
+        windowDimensions.height - (sourceLayout.y + scrollY + sourceLayout.height - verticalOffset),
       sourceSize: sourceLayout.height
     })
 
   if (align.left)
     positioning.left = getPosition({
       edge: getEdgeType(align, 'left'),
-      fromEdge: sourceLayout.x + scrollX + (offsets.horizontal ?? 0),
+      fromEdge: sourceLayout.x + scrollX + horizontalOffset,
       sourceSize: sourceLayout.width
     })
   if (align.center)
     positioning.left = getPosition({
       edge: getEdgeType(align, 'center'),
-      fromEdge: sourceLayout.x + scrollX + (offsets.horizontal ?? 0) - targetDimensions.width / 2,
+      fromEdge: sourceLayout.x + scrollX + horizontalOffset - targetDimensions.width / 2,
       sourceSize: sourceLayout.width
     })
   if (align.right)
     positioning.right = getPosition({
       edge: getEdgeType(align, 'right'),
       fromEdge:
-        windowDimensions.width -
-        (sourceLayout.x + scrollX + sourceLayout.width - (offsets.horizontal ?? 0)),
+        windowDimensions.width - (sourceLayout.x + scrollX + sourceLayout.width - horizontalOffset),
       sourceSize: sourceLayout.width
     })