react-ui-org/react-ui

`Modal` component `preventScrollUnderneath` prop not working

mbohal opened this issue · 1 comments

mbohal commented

When migrating to MkDocs/Docoff based docs (#440) an issue with the prop preventScrollUnderneath in the Modal component appeared.

It seems that the default scroll prevention does not work with the MkDocs platform:

  1. Scrolling is possible when preventScrollUnderneath="default"
  2. In Chrome (FF is OK) there is extra padding in the top right corner when Modal is open:
    image
hubacekj commented

The reason why preventScrollUnderneath="default" does not work is that we prevent scrolling by default on the body element. This documentation, however, has the scroll on the <html> element. I tried to replace the body with the documentElement in the hook and it worked as expected.

I think that leaving the scroll prevention by default on the body element is actually the correct way, which leaves us with 2 options:

  1. Make changes to the documentation so that the scrolling is on the body
  2. Add custom preventScrollUnderneath object to all the modals with basically a 1 to 1 copy of the code in the useModalScrollPrevention if (preventScrollUnderneath === 'default' branch