search

radix-ui / primitives

Radix Primitives is an open-source UI component library for building high-quality, accessible design systems and web apps. Maintained by @workos.
https://radix-ui.com/primitives
MIT License
15.85k stars 821 forks source link

Select with custom scrollbar logs errors to the console #2136

Closed multiwebinc closed 1 year ago

multiwebinc commented 1 year ago

Bug report

I am trying to follow the instructions at https://www.radix-ui.com/docs/primitives/components/select#with-custom-scrollbar to get a custom scrollbar and the instructions are unclear (since <StyledItem> is undefined), and when I use <Select.Item> instead of <StyledItem>, the following works, but it logs errors to the console:

<Select.Root>
  <Select.Trigger>
    Test
    <Select.Icon asChild>
      <ChevronDown className="h-4 w-4 opacity-50" />
    </Select.Icon>
  </Select.Trigger>
  <Select.Portal>
    <Select.Content
      className="relative z-50 min-w-[8rem] translate-y-1 rounded-md border bg-surface-500 shadow-md animate-in fade-in-80"
      position={"popper"}
    >
      <ScrollArea.Root
        className="ScrollAreaRoot h-full w-full"
        type="auto"
      >
        <Select.Viewport asChild>
          <ScrollArea.Viewport className="ScrollAreaViewport h-full w-full">
            <Select.Item value="france">
              <Select.ItemText>France</Select.ItemText>
              <Select.ItemIndicator>
                <Check className="h-4 w-4" />
              </Select.ItemIndicator>
            </Select.Item>
            <Select.Item value="united-kingdom">
              <Select.ItemText>United Kingdom</Select.ItemText>
              <Select.ItemIndicator>
                <Check className="h-4 w-4" />
              </Select.ItemIndicator>
            </Select.Item>
            <Select.Item value="spain">
              <Select.ItemText>Spain</Select.ItemText>
              <Select.ItemIndicator>
                <Check className="h-4 w-4" />
              </Select.ItemIndicator>
            </Select.Item>
          </ScrollArea.Viewport>
        </Select.Viewport>
        <ScrollArea.Scrollbar
          className="ScrollAreaScrollbar w-3 bg-gray-200"
          orientation="vertical"
        >
          <ScrollArea.Thumb className="ScrollAreaThumb rounded-sm bg-gray-500" />
        </ScrollArea.Scrollbar>
      </ScrollArea.Root>
    </Select.Content>
  </Select.Portal>
</Select.Root>

Current Behavior

p-index.js:32 Warning: Updating a style property during rerender (overflowY) when a conflicting property is set (overflow) can lead to styling bugs. To avoid this, don't mix shorthand and non-shorthand properties for the same value; instead, replace the shorthand with separate values.
    at div
    at eval (webpack-internal:///(app-client)/./node_modules/.pnpm/@radix-ui+react-primitive@1.0.2_react-dom@18.2.0_react@18.2.0/node_modules/@radix-ui/react-primitive/dist/index.module.js:45:26)
    at eval (webpack-internal:///(app-client)/./node_modules/.pnpm/@radix-ui+react-scroll-area@1.0.3_react-dom@18.2.0_react@18.2.0/node_modules/@radix-ui/react-scroll-area/dist/index.module.js:118:32)
    at eval (webpack-internal:///(app-client)/./node_modules/.pnpm/@radix-ui+react-slot@1.0.1_react@18.2.0/node_modules/@radix-ui/react-slot/dist/index.module.js:47:23)
    at eval (webpack-internal:///(app-client)/./node_modules/.pnpm/@radix-ui+react-slot@1.0.1_react@18.2.0/node_modules/@radix-ui/react-slot/dist/index.module.js:21:23)
    at eval (webpack-internal:///(app-client)/./node_modules/.pnpm/@radix-ui+react-primitive@1.0.2_react-dom@18.2.0_react@18.2.0/node_modules/@radix-ui/react-primitive/dist/index.module.js:45:26)
    at eval (webpack-internal:///(app-client)/./node_modules/.pnpm/@radix-ui+react-slot@1.0.1_react@18.2.0/node_modules/@radix-ui/react-slot/dist/index.module.js:47:23)
    at eval (webpack-internal:///(app-client)/./node_modules/.pnpm/@radix-ui+react-slot@1.0.1_react@18.2.0/node_modules/@radix-ui/react-slot/dist/index.module.js:21:23)
    at eval (webpack-internal:///(app-client)/./node_modules/.pnpm/@radix-ui+react-collection@1.0.2_react-dom@18.2.0_react@18.2.0/node_modules/@radix-ui/react-collection/dist/index.module.js:51:24)
    at eval (webpack-internal:///(app-client)/./node_modules/.pnpm/@radix-ui+react-select@1.2.1_@types+react@18.2.6_react-dom@18.2.0_react@18.2.0/node_modules/@radix-ui/react-select/dist/index.module.js:815:28)
    at div
    at eval (webpack-internal:///(app-client)/./node_modules/.pnpm/@radix-ui+react-primitive@1.0.2_react-dom@18.2.0_react@18.2.0/node_modules/@radix-ui/react-primitive/dist/index.module.js:45:26)
    at Provider (webpack-internal:///(app-client)/./node_modules/.pnpm/@radix-ui+react-context@1.0.0_react@18.2.0/node_modules/@radix-ui/react-context/dist/index.module.js:48:28)
    at eval (webpack-internal:///(app-client)/./node_modules/.pnpm/@radix-ui+react-scroll-area@1.0.3_react-dom@18.2.0_react@18.2.0/node_modules/@radix-ui/react-scroll-area/dist/index.module.js:65:32)
    at div
    at eval (webpack-internal:///(app-client)/./node_modules/.pnpm/@radix-ui+react-primitive@1.0.2_react-dom@18.2.0_react@18.2.0/node_modules/@radix-ui/react-primitive/dist/index.module.js:45:26)
    at div
    at Provider (webpack-internal:///(app-client)/./node_modules/.pnpm/@radix-ui+react-context@1.0.0_react@18.2.0/node_modules/@radix-ui/react-context/dist/index.module.js:48:28)
    at eval (webpack-internal:///(app-client)/./node_modules/.pnpm/@radix-ui+react-select@1.2.1_@types+react@18.2.6_react-dom@18.2.0_react@18.2.0/node_modules/@radix-ui/react-select/dist/index.module.js:631:28)
    at eval (webpack-internal:///(app-client)/./node_modules/.pnpm/@radix-ui+react-slot@1.0.1_react@18.2.0/node_modules/@radix-ui/react-slot/dist/index.module.js:47:23)
    at eval (webpack-internal:///(app-client)/./node_modules/.pnpm/@radix-ui+react-slot@1.0.1_react@18.2.0/node_modules/@radix-ui/react-slot/dist/index.module.js:21:23)
    at eval (webpack-internal:///(app-client)/./node_modules/.pnpm/@radix-ui+react-primitive@1.0.2_react-dom@18.2.0_react@18.2.0/node_modules/@radix-ui/react-primitive/dist/index.module.js:45:26)
    at eval (webpack-internal:///(app-client)/./node_modules/.pnpm/@radix-ui+react-dismissable-layer@1.0.3_react-dom@18.2.0_react@18.2.0/node_modules/@radix-ui/react-dismissable-layer/dist/index.module.js:45:42)
    at eval (webpack-internal:///(app-client)/./node_modules/.pnpm/@radix-ui+react-slot@1.0.1_react@18.2.0/node_modules/@radix-ui/react-slot/dist/index.module.js:47:23)
    at eval (webpack-internal:///(app-client)/./node_modules/.pnpm/@radix-ui+react-slot@1.0.1_react@18.2.0/node_modules/@radix-ui/react-slot/dist/index.module.js:21:23)
    at eval (webpack-internal:///(app-client)/./node_modules/.pnpm/@radix-ui+react-primitive@1.0.2_react-dom@18.2.0_react@18.2.0/node_modules/@radix-ui/react-primitive/dist/index.module.js:45:26)
    at eval (webpack-internal:///(app-client)/./node_modules/.pnpm/@radix-ui+react-focus-scope@1.0.2_react-dom@18.2.0_react@18.2.0/node_modules/@radix-ui/react-focus-scope/dist/index.module.js:33:19)
    at eval (webpack-internal:///(app-client)/./node_modules/.pnpm/@radix-ui+react-slot@1.0.1_react@18.2.0/node_modules/@radix-ui/react-slot/dist/index.module.js:47:23)
    at eval (webpack-internal:///(app-client)/./node_modules/.pnpm/@radix-ui+react-slot@1.0.1_react@18.2.0/node_modules/@radix-ui/react-slot/dist/index.module.js:21:23)

Expected behavior

Bugs should not occur

Reproducible example

CodeSandbox

Suggested solution

Additional context

Your environment

Software Name(s) Version
Radix Package(s) ```

"@radix-ui/colors": "^0.1.8", "@radix-ui/react-accordion": "^1.1.1", "@radix-ui/react-alert-dialog": "^1.0.3", "@radix-ui/react-aspect-ratio": "^1.0.2", "@radix-ui/react-avatar": "^1.0.2", "@radix-ui/react-checkbox": "^1.0.3", "@radix-ui/react-collapsible": "^1.0.2", "@radix-ui/react-context-menu": "^2.1.3", "@radix-ui/react-dialog": "^1.0.3", "@radix-ui/react-dropdown-menu": "^2.0.4", "@radix-ui/react-hover-card": "^1.0.5", "@radix-ui/react-label": "^2.0.1", "@radix-ui/react-menubar": "^1.0.2", "@radix-ui/react-navigation-menu": "^1.1.2", "@radix-ui/react-popover": "^1.0.5", "@radix-ui/react-progress": "^1.0.2", "@radix-ui/react-radio-group": "^1.1.2", "@radix-ui/react-scroll-area": "^1.0.3", "@radix-ui/react-select": "^1.2.1", "@radix-ui/react-separator": "^1.0.2", "@radix-ui/react-slider": "^1.1.1", "@radix-ui/react-switch": "^1.0.2", "@radix-ui/react-tabs": "^1.0.3", "@radix-ui/react-toast": "^1.1.3", "@radix-ui/react-toggle": "^1.0.2", "@radix-ui/react-tooltip": "^1.0.5"


| React            | n/a     |   18.2.0      |
| Browser          |         |   Chrome      |
| Assistive tech   |         |         |
| Node             | n/a     |   16.20.0      |
| npm/yarn         | pnpm        |  8.4.0       |
| Operating System |         |   Linux      |
joaom00 commented 1 year ago

You can silence the error with https://github.com/radix-ui/primitives/issues/2059#issuecomment-1492071891

multiwebinc commented 1 year ago

@joaom00 Thanks. I didn't find that other bug. I'll close this one since it's a duplicate.

danilo-vieira commented 1 year ago

Hey @multiwebinc did you get it? Im trying to use the same Select with the same ScrollArea but the scrollbar never shows up. Even when i set: 

<ScrollArea.Viewport
  style={{ overflowY: undefined }}
 >
 ...
 </ScrollArea.Viewport>

The scrollbar itself is not showing.

Detail: I just change your code to show the data im trying in my code. Basically is the same except useEffect.

Here: https://codesandbox.io/s/twilight-night-lmxjl1?file=/src/App.tsx

Edit: I've set the Select.Viewport maxHeight to make scrollY works

multiwebinc commented 1 year ago

@danilo-vieira Remember that Radix primitives are completely unstyled. You need to style how you want the scrollbar to look or else you won't be able to see it.

Something like this: https://codesandbox.io/s/laughing-wozniak-gggdp4?file=/src/App.js

(I tried to get Tailwind working but I was unable to, so I added inline styles for everything)