fix(ui-popover): add scrollbar to Popover if it is out of view

[joyenjoyer]

INSTUI-4453

Test 1

1. Create a Popover with content enough to go offscreen if you Zoom in 400%
2. Zoom in 400%
3. Check if a scrollbar gets displayed

Test 2

1. Add a Popover inside a Modal (trigger button should be in a Modal) with content enough to go offscreen if you Zoom in 400%
2. Zoom in 400%
3. Check if a scrollbar gets displayed

The Popover being slightly off screen during zoom is not an issue according to Reka.

[github-actions]

PR Preview Action v1.6.0
🚀 View preview at https://instructure.github.io/instructure-ui/pr-preview/pr-1885/
Built to branch gh-pages at 2025-03-04 10:02 UTC. Preview will be ready when the GitHub Pages deployment is complete.

[joyenjoyer]

I am using the ref for the displayed content and check whether it crosses the top or bottom side of the browser window.

[joyenjoyer]

If part of the displayed content is offscreen, setting an offset for Y is pointless and it breaks the logic used in line 594.

[joyenjoyer]

I left this here instead of putting into the styles file because 1/ it contains logic, 2/ this is not purely styling.

[matyasf]

If I use the test code below it first adds a scrollbar, but if I close and open the popover again it does not

class Example extends React.Component {
  state = {
    isShowingContent: false
  }

  renderCloseButton() {
    return (
      <CloseButton
        placement="end"
        offset="small"
        onClick={() => this.setState({ isShowingContent: false })}
        screenReaderLabel="Close"
      />
    )
  }

  render() {
    return (
      <View>
        <Popover
          renderTrigger={<Button>Sign In</Button>}
          isShowingContent={this.state.isShowingContent}
          onShowContent={(e) => {
            this.setState({ isShowingContent: true })
          }}
          onHideContent={(e, { documentClick }) => {
            this.setState({ isShowingContent: false })
          }}
          on="click"
          screenReaderLabel="Popover Dialog Example"
          shouldContainFocus
          shouldReturnFocus
          shouldCloseOnDocumentClick
          offsetY="16px"
        >
          <View padding="medium" display="block" as="form">
            {this.renderCloseButton()}
            <FormFieldGroup description="Log In">
              <TextInput
                renderLabel="Username"
                inputRef={(el) => {
                  if (el) {
                    this._username = el
                  }
                }}
              />
              <TextInput renderLabel="Password" type="password" />
              <TextInput renderLabel="Password" type="password" />
              <TextInput renderLabel="Password" type="password" />
              <TextInput renderLabel="Password" type="password" />
              <TextInput renderLabel="Password" type="password" />
              <TextInput renderLabel="Password" type="password" />
              <TextInput renderLabel="Password" type="password" />
              <TextInput renderLabel="Password" type="password" />
              <TextInput renderLabel="Password" type="password" />
            </FormFieldGroup>
          </View>
        </Popover>
      </View>
    )
  }
}

render(<Example />)

[matyasf]

I think trying to access window with SSR will lead to a crash? Can you please use canUseDOM and if its false this function could just return false.