Allow RemoveScroll to be disabled in Select component

[neilff]

Feature request

We're curious if you'd consider allowing the RemoveScroll component to be disabled within the Select component.

Overview

Our users have reported that it causes confusing behavior by removing the scroll bar. I'm curious what the reasoning was for this component to be used? I might be missing a larger a11y issue that I haven't considered here.

I noticed that the RemoveScroll API exposes an enabled prop (as well as a removeScrollBar prop) of which might allow this to be toggled: https://github.com/theKashey/react-remove-scroll#usage

Examples in other libraries

N/A

Who does this impact? Who is this for?

All users

[neilff]

I attempted to quickly expose this prop in a PR but realized there is more work required to fix the positioning issue that arises 🤔

Regardless, I'm curious to understand if there is a reasoning to not go down this path, otherwise I can try to piece something together.

[benoitgrelard]

Hi @neilff, the component currently only supports modal mode (as opposed to others like Popover which supports both modal/non-modal).

Modal mode means no interaction outside the layer, and that includes scrolling.

The main reason for not supporting both yet in Select is the complexity of the positioning combined with outside scroll support. The plan is to support non-modal mode (which subsequently would allow scrolling outside) but the select would close when you do so (we do this with tooltips too).

[maurocolella]

Hi @benoitgrelard . This was closed as completed on Jul 1, 2022, but I am unclear on how to enable or implement non-modal mode.

The desired effect for me is to keep the scrollbar visible, and just close the modal once the user wheels away, or scrolls away somehow.

[joaom00]

Hi @maurocolella,

that is not implemented yet. Hopefully, will be addressed by #2253. However, that PR only adds the non modal mode to the popper position.

[maurocolella]

Thank you for your reply @joaom00 . It seems reasonable to limit it to the popper position (this is how I am using the component).

In the meantime, I will simply override the implementation with a detailed comment (remove the RemoveScroll wrapper for my own purpose).

[FanManutd]

It helped me:

useEffect(() => {
    if (shown) {
      document.body.style.setProperty('overflow-y', 'auto', 'important');
    } else {
      document.body.style.removeProperty('overflow-y');
    }
  }, [shown]);

Unfortunately, this does not enable the scroll, but only shows it (which allows you to remove the content shift).

[Railly]

If you're using scrollbar-gutter: stable;, you can add this bunch of css to get rid of the shift.

  html body[data-scroll-locked] {
    --removed-body-scroll-bar-size: 0 !important;
    margin-right: 0 !important;
  } 

[ColeBlender]

I have my select in a modal so when I click the select it disables the modal. I just want clicking the select to have no effect on the modal. Can this be done with the current library?

[CodingAleCR]

Why is this closed if the issue is still happening and the MR for modal stuff isn't merged?

[danny-avila]

Why is this closed if the issue is still happening and the MR for modal stuff isn't merged?

Wondering the same

[QuocThuanTruong]

This issue is really annoying :(

[VietNguyenR]

Sorry for digging an old thread but better than asking a duplicate question, any new update related to this?