Updated flyout layout logic to set hight of flyout. Updated people-picker to support scrolling (#853)

Author: nmetulev

packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.scss

@@ -141,7 +141,7 @@ mgt-people-picker .root {
         text-align: left;
         list-style-type: none;
         background-color: $dropdown__background-color;
-
+        max-height: var(--mgt-flyout-set-height, unset);
         li {
           cursor: pointer;
         }

packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts

@@ -485,7 +485,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
     return html`
       <mgt-flyout light-dismiss class="flyout">
         ${anchor}
-        <div slot="flyout" class="flyout-root">
+        <div slot="flyout" class="flyout-root" @wheel=${(e: WheelEvent) => this.handleSectionScroll(e)}>
           ${this.renderFlyoutContent()}
         </div>
       </mgt-flyout>
@@ -980,38 +980,31 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
    * @param event - tracks user key selection
    */
   private handleArrowSelection(event: KeyboardEvent): void {
-    if (this._foundPeople.length) {
+    const peopleList = this.renderRoot.querySelector('.people-list');
+    if (peopleList && peopleList.children.length) {
       // update arrow count
       if (event.keyCode === 38) {
         // up arrow
-        if (this._arrowSelectionCount > 0) {
-          this._arrowSelectionCount--;
-        } else {
-          this._arrowSelectionCount = 0;
-        }
+        this._arrowSelectionCount =
+          (this._arrowSelectionCount - 1 + peopleList.children.length) % peopleList.children.length;
       }
       if (event.keyCode === 40) {
         // down arrow
-        if (
-          this._arrowSelectionCount + 1 !== this._foundPeople.length &&
-          this._arrowSelectionCount + 1 < this.showMax
-        ) {
-          this._arrowSelectionCount++;
-        } else {
-          this._arrowSelectionCount = 0;
-        }
+        this._arrowSelectionCount = (this._arrowSelectionCount + 1) % peopleList.children.length;
       }
 
-      const peopleList = this.renderRoot.querySelector('.people-list');
       // reset background color
-      if (peopleList) {
-        // tslint:disable-next-line: prefer-for-of
-        for (let i = 0; i < peopleList.children.length; i++) {
-          peopleList.children[i].classList.remove('focused');
-        }
+      // tslint:disable-next-line: prefer-for-of
+      for (let i = 0; i < peopleList.children.length; i++) {
+        peopleList.children[i].classList.remove('focused');
       }
+
       // set selected background
-      peopleList.children[this._arrowSelectionCount].classList.add('focused');
+      const focusedItem = peopleList.children[this._arrowSelectionCount];
+      if (focusedItem) {
+        focusedItem.classList.add('focused');
+        focusedItem.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
+      }
     }
   }
 
@@ -1040,4 +1033,17 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
       return filtered;
     }
   }
+
+  // stop propagating wheel event to flyout so mouse scrolling works
+  private handleSectionScroll(e: WheelEvent) {
+    const target = this.renderRoot.querySelector('.flyout-root') as HTMLElement;
+    if (target) {
+      if (
+        !(e.deltaY < 0 && target.scrollTop === 0) &&
+        !(e.deltaY > 0 && target.clientHeight + target.scrollTop >= target.scrollHeight - 1)
+      ) {
+        e.stopPropagation();
+      }
+    }
+  }
 }

packages/mgt-components/src/components/sub-components/mgt-flyout/mgt-flyout.ts

@@ -81,7 +81,8 @@ export class MgtFlyout extends MgtBaseComponent {
         // reset style for next update
         flyout.style.width = null;
         flyout.style.setProperty('--mgt-flyout-set-width', null);
-        flyout.style.height = null;
+        flyout.style.setProperty('--mgt-flyout-set-height', null);
+        flyout.style.maxHeight = null;
         flyout.style.top = null;
         flyout.style.left = null;
         flyout.style.bottom = null;
@@ -299,29 +300,47 @@ export class MgtFlyout extends MgtBaseComponent {
         left = anchorRect.left;
       }
 
-      if (flyoutRect.height + 2 * this._edgePadding > windowRect.height) {
-        if (flyoutRect.height >= windowRect.height) {
-          height = windowRect.height;
-          top = 0;
-        } else {
-          top = (windowRect.height - flyoutRect.height) / 2;
-        }
-      } else if (
-        this.avoidHidingAnchor &&
-        anchorRect.top + anchorRect.height + flyoutRect.height + this._edgePadding > windowRect.height &&
-        anchorRect.top - flyoutRect.height - this._edgePadding > 0
-      ) {
-        if (windowRect.height - anchorRect.top + flyoutRect.height < 0) {
-          bottom = windowRect.height - flyoutRect.height - this._edgePadding;
+      const anchorRectBottomToWindowBottom = windowRect.height - (anchorRect.top + anchorRect.height);
+      const anchorRectTopToWindowTop = anchorRect.top;
+
+      if (this.avoidHidingAnchor) {
+        if (anchorRectBottomToWindowBottom <= flyoutRect.height) {
+          if (anchorRectTopToWindowTop < flyoutRect.height) {
+            if (anchorRectTopToWindowTop > anchorRectBottomToWindowBottom) {
+              // more room top than bottom - render above
+              bottom = windowRect.height - anchorRect.top;
+              height = anchorRectTopToWindowTop;
+            } else {
+              // more room bottom than top
+              top = anchorRect.bottom;
+              height = anchorRectBottomToWindowBottom;
+            }
+          } else {
+            // render above anchor
+            bottom = windowRect.height - anchorRect.top;
+            height = anchorRectTopToWindowTop;
+          }
         } else {
-          bottom = Math.max(windowRect.height - anchorRect.top, this._edgePadding);
+          top = anchorRect.bottom;
+          height = anchorRectBottomToWindowBottom;
         }
       } else {
-        if (anchorRect.top + anchorRect.height + flyoutRect.height + this._edgePadding > windowRect.height) {
-          // it will render offscreen bellow, move it up a bit
-          top = windowRect.height - flyoutRect.height - this._edgePadding;
+        if (flyoutRect.height + 2 * this._edgePadding > windowRect.height) {
+          // flyout wants to be higher than the window hight, and we don't need to avoid hiding the anchor
+          // make the flyout height the height of the window
+          if (flyoutRect.height >= windowRect.height) {
+            height = windowRect.height;
+            top = 0;
+          } else {
+            top = (windowRect.height - flyoutRect.height) / 2;
+          }
         } else {
-          top = Math.max(anchorRect.top + anchorRect.height, this._edgePadding);
+          if (anchorRect.top + anchorRect.height + flyoutRect.height + this._edgePadding > windowRect.height) {
+            // it will render offscreen bellow, move it up a bit
+            top = windowRect.height - flyoutRect.height - this._edgePadding;
+          } else {
+            top = Math.max(anchorRect.top + anchorRect.height, this._edgePadding);
+          }
         }
       }
 
@@ -342,14 +361,20 @@ export class MgtFlyout extends MgtBaseComponent {
         flyout.style.top = `${top + windowRect.top}px`;
       }
 
-      flyout.style.height = height ? `${height}px` : null;
-
       if (width) {
         // if we had to set the width, recalculate since the height could have changed
         flyout.style.width = `${width}px`;
         flyout.style.setProperty('--mgt-flyout-set-width', `${width}px`);
         window.requestAnimationFrame(() => this.updateFlyout());
       }
+
+      if (height) {
+        flyout.style.maxHeight = `${height}px`;
+        flyout.style.setProperty('--mgt-flyout-set-height', `${height}px`);
+      } else {
+        flyout.style.maxHeight = null;
+        flyout.style.setProperty('--mgt-flyout-set-height', `unset`);
+      }
     }
   }