ui icon indicating copy to clipboard operation
ui copied to clipboard

ScrollArea in Drawer is not working

Open yusupovbg opened this issue 1 year ago • 2 comments

Description

I've encountered an issue where the ScrollArea component isn't working as expected inside a Drawer component in the shadcn-ui framework.

Steps to Reproduce

  1. Import the Drawer and ScrollArea components from shadcn-ui.
  2. Implement a Drawer with a ScrollArea component inside it.
  3. Populate the ScrollArea with sufficient content to require scrolling.
  4. Observe that the scrolling functionality is not working.

Expected Behavior

The ScrollArea inside the Drawer should allow for vertical scrolling when the content overflows the visible area.

Actual Behavior

The ScrollArea does not respond to scroll attempts, and the content is not fully accessible.

Possible Solution or Workaround

I haven't found a workaround yet. A possible solution might involve adjusting the CSS properties of the ScrollArea when it's used within a Drawer.

yusupovbg avatar Dec 23 '23 20:12 yusupovbg

Doing a quick check, the feature might not be that hard to add. We basically have to tweak the first request to conform the WebSocket negotiation spec.

So far, the overall implementation should not need changes; rather just writeH2. Fetch already provides the mode through upgrade here: https://github.com/nodejs/undici/blob/ac30400a191a78c6148c50e7ff70390a4ea93f90/lib/fetch/index.js#L1963C9-L1963C16

It is a matter of writeH2 to catch it and attach it with the correct semantics at the headers if the connection is happening through h2, and call onUpgrade if everything went well accordingly. As fetch uses the socket directly, it should be even less complicated. But we would need to play with it to see if it works.

metcoder95 avatar Nov 26 '23 10:11 metcoder95

FYI, here is the RFC for web socket over http 2.0 https://www.rfc-editor.org/rfc/rfc8441

baybal avatar Nov 30 '23 08:11 baybal