fix(select): use overflowX/overflowY instead of overflow shorthand in Viewport

.changeset/five-zoos-smash.md

@@ -0,0 +1,5 @@
+---
+"@radix-ui/react-select": patch
+---
+
+Fix React warning when composing ScrollArea inside Select by replacing overflow shorthand with overflowX/overflowY longhand properties in Select.Viewport

apps/storybook/stories/select.stories.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/jsx-pascal-case */
 import * as React from 'react';
 import { createPortal } from 'react-dom';
-import { Dialog, Select, Label as LabelPrimitive } from 'radix-ui';
+import { Dialog, Select, ScrollArea, Label as LabelPrimitive } from 'radix-ui';
 import { foodGroups } from '@repo/test-data/foods';
 import styles from './select.stories.module.css';
 
@@ -864,6 +864,48 @@ export const WithVeryLongSelectItems = () => (
   </div>
 );
 
+export const WithScrollArea = () => {
+  <div  style={{ padding: 50 }}>
+    <p style={{ marginBottom: 16, fontSize: 13, color: '#666', maxWidth: 400 }}>
+      Open the browser console. Before the fix, opening this select logs a React
+      style conflict warning: <em>"Updating a style property during rerender
+      (overflowY) when a conflicting property is set (overflow)"</em>.
+      After the fix, no warning should appear.
+    </p>
+    <Select.Root>
+      <Select.Trigger className={styles.trigger}>
+        <Select.Value placeholder="Pick a fruit…" />
+        <Select.Icon />
+      </Select.Trigger>
+      <Select.Portal>
+        <Select.Content className={styles.content} position="popper" sideOffset={5}>
+          <ScrollArea.Root style={{ height: 200 }} type="auto">
+            <Select.Viewport asChild>
+              <ScrollArea.Viewport className={styles.viewport}>
+                {[
+                  'Apple', 'Banana', 'Blueberry', 'Grapes', 'Pineapple',
+                  'Mango', 'Strawberry', 'Watermelon', 'Peach', 'Plum',
+                  'Cherry', 'Kiwi',
+                ].map((fruit) => (
+                  <Select.Item key={fruit} className={styles.item} value={fruit.toLowerCase()}>
+                    <Select.ItemText>{fruit}</Select.ItemText>
+                    <Select.ItemIndicator className={styles.indicator}>
+                      <TickIcon />
+                    </Select.ItemIndicator>
+                  </Select.Item>
+                ))}
+              </ScrollArea.Viewport>
+            </Select.Viewport>
+            <ScrollArea.Scrollbar orientation="vertical" style={{ width: 6 }}>
+              <ScrollArea.Thumb style={{ background: 'rgba(0,0,0,0.3)', borderRadius: 3 }} />
+            </ScrollArea.Scrollbar>
+          </ScrollArea.Root>
+        </Select.Content>
+      </Select.Portal>
+    </Select.Root>
+  </div>
+}
+
 export const ChromaticShortOptionsPaddedContent = () => (
   <ChromaticStoryShortOptions paddedElement="content" />
 );

packages/react/select/src/select.tsx

@@ -1242,7 +1242,8 @@ const SelectViewport = React.forwardRef<SelectViewportElement, SelectViewportPro
               // 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',
+              overflowX: 'hidden',
+              overflowY: 'auto',
               ...viewportProps.style,
             }}
             onScroll={composeEventHandlers(viewportProps.onScroll, (event) => {