From 58331bdccec636692f3f71675b92a2a4c47c5326 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <oliviertassinari@users.noreply.github.com>
Date: Sat, 2 May 2026 19:38:18 +0200
Subject: [PATCH] [select][autocomplete] Fix iOS group scrollbar overflow

---
 .../autocomplete/demos/grid/css-modules/index.module.css        | 1 +
 .../react/components/autocomplete/demos/grid/tailwind/index.tsx | 2 +-
 .../autocomplete/demos/grouped/css-modules/index.module.css     | 2 +-
 .../combobox/demos/grouped/css-modules/index.module.css         | 2 +-
 .../select/demos/grouped/css-modules/index.module.css           | 2 ++
 .../react/components/select/demos/grouped/tailwind/index.tsx    | 2 +-
 6 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
index 0e9f7d56841..77836b39492 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.module.css
@@ -174,6 +174,7 @@
   scroll-padding-top: 2.5rem;
   scroll-padding-bottom: 0.35rem;
   overscroll-behavior: contain;
+  isolation: isolate; /* Prevent overlap with iOS overlay scrollbars. */
   max-height: min(
     calc(20.5rem - var(--input-container-height)),
     calc(var(--available-height) - var(--input-container-height))
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx
index b227938047b..e5dace376f2 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx
@@ -74,7 +74,7 @@ export default function ExampleEmojiPicker() {
                     No emojis found
                   </div>
                 </Autocomplete.Empty>
-                <Autocomplete.List className="max-h-[min(calc(20.5rem-var(--input-container-height)),calc(var(--available-height)-var(--input-container-height)))] overflow-auto scroll-pt-10 scroll-pb-[0.35rem] overscroll-contain">
+                <Autocomplete.List className="isolate max-h-[min(calc(20.5rem-var(--input-container-height)),calc(var(--available-height)-var(--input-container-height)))] overflow-auto scroll-pt-10 scroll-pb-[0.35rem] overscroll-contain">
                   {(group: EmojiGroup) => (
                     <Autocomplete.Group key={group.value} items={group.items} className="block">
                       <Autocomplete.GroupLabel className="sticky top-0 z-[1] m-0 w-full border-b border-gray-100 bg-[canvas] px-4 pb-1 pt-2 text-[0.75rem] font-bold uppercase tracking-wide text-gray-600">
diff --git a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css
index 1e6bfc23f89..47dabc66b89 100644
--- a/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/autocomplete/demos/grouped/css-modules/index.module.css
@@ -88,7 +88,7 @@
   position: sticky;
   z-index: 1;
   top: 0;
-  margin: 0 0.5rem 0 0;
+  margin: 0 0.5rem 0 0; /* Prevent overlap with iOS overlay scrollbars. */
   width: calc(100% - 0.5rem);
 }
 
diff --git a/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
index 6a0925d9226..066951e8d0b 100644
--- a/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/combobox/demos/grouped/css-modules/index.module.css
@@ -147,7 +147,7 @@
   position: sticky;
   z-index: 1;
   top: 0;
-  margin: 0 0.5rem 0 0;
+  margin: 0 0.5rem 0 0; /* Prevent overlap with iOS overlay scrollbars. */
   width: calc(100% - 0.5rem);
 }
 
diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
index 14f36cd7af0..8b758b71608 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/css-modules/index.module.css
@@ -131,6 +131,8 @@
   position: sticky;
   z-index: 1;
   top: 0;
+  margin: 0 0.5rem 0 0; /* Prevent overlap with iOS overlay scrollbars. */
+  width: calc(100% - 0.5rem);
 }
 
 .Item {
diff --git a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
index 0d3865c809e..8ae5db7472c 100644
--- a/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
+++ b/docs/src/app/(docs)/react/components/select/demos/grouped/tailwind/index.tsx
@@ -27,7 +27,7 @@ export default function ExampleSelectGrouped() {
                 {groupedProduce.map((group, index) => (
                   <React.Fragment key={group.value}>
                     <Select.Group className="block pb-0.5">
-                      <Select.GroupLabel className="sticky top-0 z-[1] bg-[canvas] pr-4 pb-1 pl-[1.875rem] pt-2 text-[0.6875rem] font-bold text-[var(--color-gray-700)] uppercase tracking-wider">
+                      <Select.GroupLabel className="sticky top-0 z-[1] mr-2 w-[calc(100%-0.5rem)] bg-[canvas] pr-4 pb-1 pl-[1.875rem] pt-2 text-[0.6875rem] font-bold text-[var(--color-gray-700)] uppercase tracking-wider">
                         {group.value}
                       </Select.GroupLabel>
                       {group.items.map((item) => (