fix(popover): prevent scrollbar (#2730)

* fix(popover): prevent scrollbar

* style: update elements/pf-popover/pf-popover.ts

Author: bennypowers

.changeset/upset-laws-camp.md

@@ -0,0 +1,5 @@
+---
+"@patternfly/elements": patch
+---
+`<pf-popover>`: prevent appearance of an unwanted scrollbar in some cases where
+popover is positioned at the far edge of the viewport

elements/pf-popover/demo/edge-of-viewport.html

@@ -0,0 +1,29 @@
+<p>
+  When the viewport is <code>1190</code> pixels wide, (such that the "toggle popover" button appears
+  at the far edge of the viewport, the popover at the far end of the viewport
+  must not cause a horizontal scrollbar which would otherwise not have been there.
+</p>
+<pf-button disabled>Spacer</pf-button>
+<pf-button disabled>Spacer</pf-button>
+<pf-button disabled>Spacer</pf-button>
+<pf-button disabled>Spacer</pf-button>
+<pf-button disabled>Spacer</pf-button>
+<pf-button disabled>Spacer</pf-button>
+<pf-button disabled>Spacer</pf-button>
+<pf-button disabled>Spacer</pf-button>
+<pf-button disabled>Spacer</pf-button>
+<pf-button disabled>Spacer</pf-button>
+<pf-button disabled>Spacer</pf-button>
+<pf-button disabled>Spacer</pf-button>
+<pf-popover heading="Popover heading" footer="Popover footer">
+  <p slot="body">In this popover, the content is quite wide,
+                 so as to force a horizontal scrollbar if the
+                 dialog content is improperly rendered.</p>
+  <pf-button>Toggle popover</pf-button>
+</pf-popover>
+
+
+<script type="module">
+  import '@patternfly/elements/pf-popover/pf-popover.js';
+  import '@patternfly/elements/pf-button/pf-button.js';
+</script>

elements/pf-popover/pf-popover.ts

@@ -312,6 +312,9 @@ export class PfPopover extends LitElement {
   @query('#trigger') private _slottedTrigger?: HTMLElement | null;
   @query('#arrow') private _arrow!: HTMLDivElement;
 
+  /** True before the show animation begins and after the hide animation ends */
+  #hideDialog = true;
+
   #referenceTrigger?: HTMLElement | null = null;
 
   #float = new FloatingDOMController(this, {
@@ -357,6 +360,7 @@ export class PfPopover extends LitElement {
               @keydown="${this.#onKeydown}"
               @click="${this.toggle}"></slot>
         <dialog id="popover"
+                ?hidden="${this.#hideDialog}"
                 aria-labelledby="heading"
                 aria-describedby="body"
                 aria-label=${ifDefined(this.label)}>
@@ -462,6 +466,8 @@ export class PfPopover extends LitElement {
    * Opens the popover
    */
   @bound async show() {
+    this.#hideDialog = false;
+    this.requestUpdate();
     this.dispatchEvent(new PopoverShowEvent());
     await this.updateComplete;
     await this.#float.show({
@@ -484,6 +490,8 @@ export class PfPopover extends LitElement {
     this._popover?.close();
     this.dispatchEvent(new PopoverHiddenEvent());
     PfPopover.instances.delete(this);
+    this.#hideDialog = true;
+    this.requestUpdate();
   }
 }