Closing custom Dimmer opened over scrolling modal removes scroll

[ahmettuncertr]

trafficstars

Bug Report

While there is a scrolling(exceeds the height of the browser) modal on the page, if a Dimmer (not a Modal or Confirm, just pure Dimmer) opened then closed, scroll functionality will be removed.

Steps

1. create a scrolling modal (https://react.semantic-ui.com/modules/modal/#variations-scrolling)
2. create a page dimmer (https://react.semantic-ui.com/modules/dimmer/#types-page)
3. close dimmer

Expected Result

there should be scrollable area.

Actual Result

There is no scrolling area. body has classes "dimmable dimmed scrolling" before closing dimmer. After closing dimmer, body has only class "scrolling". This situation causes changing overflow and justify-content attributes of modal(actually dimmer of modal).

Version

0.88.2, 2.1.5 and 3.0.0-beta.2

Testcase

import React from 'react'
import {
  ModalHeader,
  ModalDescription,
  ModalContent,
  ModalActions,
  Button,
  Icon,
  Image,
  Modal,
  HeaderSubheader,
  Dimmer,
  Header,
  Icon
} from 'semantic-ui-react'

function ModalScrollingExample() {
  const [open, setOpen] = React.useState(false)
  const [openDimmer, setOpenDimmer] = React.useState(false)

  return (
    <Modal
      open={open}
      onClose={() => setOpen(false)}
      onOpen={() => setOpen(true)}
      trigger={<Button>Long Modal</Button>}
    >
      <ModalHeader>Modal Header</ModalHeader>
      <ModalContent image>
        <Image size='medium' src='https://react.semantic-ui.com/images/wireframe/image.png' wrapped />
        <ModalDescription>
          <p>
            This is an example of expanded content that will cause the modal's
            dimmer to scroll.
          </p>
          <div>
            <Button
              content='Show'
              icon='plus'
              labelPosition='left'
              onClick={() => setOpenDimmer(true)}
            />
    
            <Dimmer active={openDimmer} onClickOutside={() => setOpenDimmer(false)} page>
              <Header as='h2' icon inverted>
                <Icon name='heart' />
                Dimmed Message!
                <HeaderSubheader>Dimmer sub-header</HeaderSubheader>
              </Header>
            </Dimmer>
          </div>

          <Image
            src='https://react.semantic-ui.com/images/wireframe/paragraph.png'
            style={{ marginBottom: 10 }}
          />
          <Image
            src='https://react.semantic-ui.com/images/wireframe/paragraph.png'
            style={{ marginBottom: 10 }}
          />
          <Image
            src='https://react.semantic-ui.com/images/wireframe/paragraph.png'
            style={{ marginBottom: 10 }}
          />
          <Image
            src='https://react.semantic-ui.com/images/wireframe/paragraph.png'
            style={{ marginBottom: 10 }}
          />
          <Image
            src='https://react.semantic-ui.com/images/wireframe/paragraph.png'
            style={{ marginBottom: 10 }}
          />
          <Image
            src='https://react.semantic-ui.com/images/wireframe/paragraph.png'
            style={{ marginBottom: 10 }}
          />
          <Image
            src='https://react.semantic-ui.com/images/wireframe/paragraph.png'
            style={{ marginBottom: 10 }}
          />
          <Image src='https://react.semantic-ui.com/images/wireframe/paragraph.png' />
          
        </ModalDescription>
      </ModalContent>
      <ModalActions>
        <Button primary onClick={() => setOpen(false)}>
          Proceed <Icon name='right chevron' />
        </Button>
      </ModalActions>
    </Modal>
  )
}

[welcome[bot]]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.