[O2B-1077] Keep scroll in popover after re-rendering (#1300)

Author: martinboulais

lib/public/components/Filters/common/filtersPanelPopover.js

@@ -32,7 +32,7 @@ const filtersToggleTrigger = () => h('button#openFilterToggle.btn.btn.btn-primar
  *
  * @return {Component} the filters panel
  */
-const filtersToggleContent = (filteringModel, columns) => h('.w-l.h-100.scroll-y', [
+const filtersToggleContent = (filteringModel, columns) => h('.w-l.scroll-y', [
     h('.f4.ph3.pv2', 'Filters'),
     Object.entries(columns)
         .filter(([_, column]) => column.filter)
@@ -62,6 +62,8 @@ export const filtersPanelPopover = (filterModel, activeColumns) => h('.flex-row.
         {
             ...PopoverTriggerPreConfiguration.click,
             anchor: PopoverAnchors.RIGHT_START,
+            // Set children size to true because filter panel has an overflow scroll
+            setChildrenSize: true,
         },
     ),
 ]);

lib/public/components/common/popover/PopoverEngine.js

@@ -142,6 +142,7 @@ class PopoverEngine {
      * @param {{x: number, y: number}} displayZoneMargins the margins to apply at the edge of the display zone
      * @param {{main: MainAxisPopoverPosition, cross: CrossAxisPopoverPosition}} position the position of the popover relative to the trigger
      * @param {{main: BoundingBoxProjector, cross: BoundingBoxProjector}} projectors the axis projectors
+     * @param {boolean} setChildrenSize if true, children component size will be set to the popover size
      */
     constructor(
         trigger,
@@ -150,6 +151,7 @@ class PopoverEngine {
         displayZoneMargins,
         position,
         projectors,
+        setChildrenSize,
     ) {
         this._popover = popover;
 
@@ -164,6 +166,8 @@ class PopoverEngine {
 
         this._displayBoundingBox = displayBoundingBox;
         this._displayZoneMargins = displayZoneMargins;
+
+        this._setChildrensize = setChildrenSize;
     }
 
     /**
@@ -222,6 +226,11 @@ class PopoverEngine {
             }
 
             this._mainAxisProjector.setSize(this._popover.style, `${mainAxisSize}px`);
+            if (this._setChildrensize) {
+                for (const children of this._popover.children) {
+                    this._mainAxisProjector.setSize(children.style, `${mainAxisSize}px`);
+                }
+            }
 
             this._refreshPopoverBoundingBox();
         }
@@ -235,6 +244,11 @@ class PopoverEngine {
     resizeAlongCrossAxis() {
         if (this._popoverSizeCrossAxis > this._availableSpaceInCrossAxis) {
             this._crossAxisProjector.setSize(this._popover.style, `${this._availableSpaceInCrossAxis}px`);
+            if (this._setChildrensize) {
+                for (const children of this._popover.children) {
+                    this._crossAxisProjector.setSize(children.style, `${this._availableSpaceInCrossAxis}px`);
+                }
+            }
 
             this._refreshPopoverBoundingBox();
         }
@@ -280,7 +294,7 @@ class PopoverEngine {
 
         const crossAxisPosition = Math.max(
             this._crossAxisProjector.getPosition(this._displayBoundingBox)
-                + this._crossAxisProjector.getPosition(this._displayZoneMargins),
+            + this._crossAxisProjector.getPosition(this._displayZoneMargins),
             Math.min(
                 this._availableSpaceInCrossAxis - this._popoverSizeCrossAxis,
                 targetStartCrossAxis,
@@ -420,9 +434,10 @@ class PopoverEngine {
  * @param {BoundingBox} displayBoundingBox the bounding box of the display zone, representing the limits where the popover may be drawn
  * @param {{x: number, y: number}} displayZoneMargins the margins to apply at the edge of the display zone
  * @param {PopoverAnchor} anchor the anchor to place the popover
+ * @param {boolean} setChildrenSize if true, children component size will be set to the popover size
  * @return {PopoverEngine} the created popover engine
  */
-export const createPopoverEngine = (trigger, popover, displayBoundingBox, displayZoneMargins, anchor) => {
+export const createPopoverEngine = (trigger, popover, displayBoundingBox, displayZoneMargins, anchor, setChildrenSize) => {
     // Top and Bottom are the 6 first anchors
     const mainAxisProjector = anchor / 6 < 1 ? verticalProjector : horizontalProjector;
     const crossAxisProjector = anchor / 6 < 1 ? horizontalProjector : verticalProjector;
@@ -440,5 +455,6 @@ export const createPopoverEngine = (trigger, popover, displayBoundingBox, displa
         displayZoneMargins,
         { main: mainAxisPosition, cross: crossAxisPosition },
         { main: mainAxisProjector, cross: crossAxisProjector },
+        setChildrenSize,
     );
 };

lib/public/components/common/popover/dropdown.js

@@ -40,6 +40,8 @@ export const dropdown = (
             ...PopoverTriggerPreConfiguration.click,
             anchor: alignment === 'left' ? PopoverAnchors.BOTTOM_START : PopoverAnchors.BOTTOM_END,
             onVisibilityChange: configuration.onVisibilityChange,
+            // Set children size to true because dropdown has an overflow scroll
+            setChildrenSize: true,
         },
     );
 };

lib/public/components/common/popover/popover.js

@@ -15,6 +15,7 @@ import { h } from '/js/src/index.js';
 import { createPortal } from '../../../utilities/createPortal.js';
 import { getUniqueId } from '../../../utilities/getUniqueId.js';
 import { createPopoverEngine } from './PopoverEngine.js';
+import { StatefulComponent } from '../StatefulComponent.js';
 
 /**
  * Default margin to apply at the edge of the display zone
@@ -68,12 +69,15 @@ const DEFAULT_DISPLAY_ZONE_MARGIN = { left: 15, top: 15 };
  * @property {popoverShowConditionCallback} [showCondition] function called before showing the popover
  * @property {string[]|string} [popoverClass] css classes to apply to the popover (in addition to the default ones)
  * @property {{x: number, y: number}} displayZoneMargins the margins to apply at the edges to display zone
+ * @property {boolean} [setChildrenSize] if true, popover children elements will have width and height set to the size of the popover. Set this
+ *     flag to true if popover content has a fixed size that should be 100% of the popover, because if using style of 100% height/width the
+ *     scroll will not be kept between renders
  */
 
 /**
  * Component to display a popover triggered on specific actions
  */
-class PopoverComponent {
+class PopoverComponent extends StatefulComponent {
     /**
      * Constructor
      *
@@ -82,6 +86,8 @@ class PopoverComponent {
      * @param {PopoverConfiguration} configuration the popover options
      */
     constructor({ attrs: { trigger, content, configuration } }) {
+        super();
+
         this._triggerComponent = trigger;
         this._contentCompoenent = content;
 
@@ -135,6 +141,7 @@ class PopoverComponent {
                 },
                 this._displayZoneMargins,
                 this._anchor,
+                this._setChildrenSize,
             );
             engine.reset();
             engine.fitAndPosition();
@@ -154,6 +161,7 @@ class PopoverComponent {
             this._isVisible = visibility;
             this.updatePopover();
             this._onVisibilityChange(visibility);
+            this.notify();
         }
     }
 
@@ -278,6 +286,7 @@ class PopoverComponent {
             showCondition,
             popoverClass = [],
             displayZoneMargins = {},
+            setChildrenSize = false,
         } = configuration;
         this._anchor = anchor;
         this._onTriggerNodeChange = onTriggerNodeChange.bind(this);
@@ -289,6 +298,7 @@ class PopoverComponent {
             ...DEFAULT_DISPLAY_ZONE_MARGIN,
             ...displayZoneMargins,
         };
+        this._setChildrenSize = setChildrenSize;
     }
 }
 

lib/public/utilities/createPortal.js

@@ -76,7 +76,7 @@ class Portal {
         if (this.container.contains(this.rootNode)) {
             // Unmount the node in order for its lifecycle functions to be called
             mount(this.rootNode, () => null, false);
-            this.rootNode.removeEventListener('click', this._propagateClick());
+            this.rootNode.removeEventListener('click', this._propagateClick);
             this.rootNode.remove();
         }
     }