clauderic / dnd-kit

The modern, lightweight, performant, accessible and extensible drag & drop toolkit for React.
http://dndkit.com
MIT License
12.87k stars 640 forks source link

Double Scrollbar Issue on Live Region #1326

Open dennemark opened 9 months ago

dennemark commented 9 months ago

Hi, I have an overflow: hidden container around my sortable layers. Unfortunately dnd-kit places the position: fixed Live Region at the end of the sortable layers and this creates a second scrollbar, if the height of all layers is longer than the actual site. It seems fixedelements move out of the overflow: hidden context (https://stackoverflow.com/questions/11927583/hide-overflow-on-elements-with-fixed-position).

When I check my css and just change the height of the Live Region from 1 to 0 the scrollbar is gone. Is there a reason the live region has a height of 1?

Related: https://github.com/clauderic/dnd-kit/issues/780 Weidly the scrollbars of 780 were fixed by introducing fixedin: https://github.com/clauderic/dnd-kit/pull/772

dennemark commented 6 months ago

The issue arises in DndContext. It uses Accessibility which uses LiveRegion that has the position:fixed element. Is there a reason that Accessibility is at the bottom of the elements? I would just move it up to the top or just give the Live Region a top: 0 style. That would move it to the top of my list and then double scrollbars would not appear.

https://github.com/clauderic/dnd-kit/blob/694dcc2f62e5269541fc941fa6c9af46ccd682ad/packages/core/src/components/DndContext/DndContext.tsx#L704

 <DndMonitorContext.Provider value={registerMonitorListener}>
  <Accessibility
        {...accessibility}
        hiddenTextDescribedById={draggableDescribedById}
      />
      <InternalContext.Provider value={internalContext}>
        <PublicContext.Provider value={publicContext}>
          <ActiveDraggableContext.Provider value={transform}>
            {children}
          </ActiveDraggableContext.Provider>
        </PublicContext.Provider>
        <RestoreFocus disabled={accessibility?.restoreFocus === false} />
      </InternalContext.Provider>
    {/*  <Accessibility
        {...accessibility}
        hiddenTextDescribedById={draggableDescribedById}
      />*/}
    </DndMonitorContext.Provider>

The other alternative that seems to work is giving a container as a portal to <DndContext accessibility={{ container }} />

But then it would be still good to know, if it is fine to move the live region to the top instead of the bottom of my dnd sortable list?