fix(gv-select): correctly display and place option list when used in …

…a small container

Delegate option list placement to popper.js to ensure a correct behavior.

https://gravitee.atlassian.net/browse/APIM-866
gravitee-io/issues#8348

jest.setup.js

@@ -1,5 +1,8 @@
 import { jest } from '@jest/globals';
 
+// Mock Popper.js as there is no need to have it
+jest.mock('@popperjs/core');
+
 document.createRange = () => {
   const range = new Range();
 

package.json

@@ -58,6 +58,7 @@
     "@codemirror/stream-parser": "^0.19.3",
     "@formatjs/intl-locale": "^2.4.40",
     "@formatjs/intl-relativetimeformat": "^9.3.2",
+    "@popperjs/core": "^2.11.7",
     "clipboard-copy": "^4.0.0",
     "codemirror-asciidoc": "^2.0.0",
     "date-fns": "^2.26.0",

src/atoms/gv-select/gv-select.js

@@ -25,6 +25,7 @@ import '../gv-icon';
 import { dispatchCustomEvent } from '../../lib/events';
 import { InputElement } from '../../mixins/input-element';
 import { withResizeObserver } from '../../mixins/with-resize-observer';
+import { createPopper } from '@popperjs/core';
 
 /**
  * A select component, is more like a list box...
@@ -149,11 +150,10 @@ export class GvSelect extends withResizeObserver(InputElement(LitElement)) {
         .select__list {
           color: var(--c);
           list-style: none;
-          position: absolute;
+          position: fixed;
           background-color: var(--bgc-list);
           list-style: none;
           padding: 0;
-          transition: all 0.3s ease 0s;
           margin: 0;
           width: 100%;
           cursor: pointer;
@@ -366,6 +366,30 @@ export class GvSelect extends withResizeObserver(InputElement(LitElement)) {
     }
   }
 
+  /**
+   * When the component has been updated for the first time we can create the
+   * popper instance that will be used to position the list of options.
+   */
+  firstUpdated() {
+    const input = this.shadowRoot.querySelector(`#${this._id}`);
+    const list = this.shadowRoot.querySelector(`#${this._id}-list`);
+
+    if (input && list) {
+      this.popperInstance = createPopper(input, list, {
+        placement: 'bottom-start',
+        strategy: 'fixed',
+      });
+    }
+  }
+
+  updated() {
+    if (this.popperInstance) {
+      // Let's ask the popper instance to update itself to be sure the list of
+      // options is correctly positioned
+      this.popperInstance.update();
+    }
+  }
+
   render() {
     const classes = {
       box: true,
@@ -400,7 +424,12 @@ export class GvSelect extends withResizeObserver(InputElement(LitElement)) {
         </div>
         ${this.readonly
           ? ''
-          : html` <ul class="${classMap(Object.assign({ select__list: true }))}" role="listbox" ?aria-expanded="${!this._isClosed}">
+          : html` <ul
+              id="${this._id}-list"
+              class="${classMap(Object.assign({ select__list: true }))}"
+              role="listbox"
+              ?aria-expanded="${!this._isClosed}"
+            >
               ${this._options &&
               repeat(
                 this._options,

src/atoms/gv-select/gv-select.stories.js

@@ -26,6 +26,7 @@ const conf = {
   css: `
     :host {
       height: 250px;
+      overflow: auto;
     }
 
     gv-select {

yarn.lock

@@ -3926,6 +3926,7 @@ __metadata:
     "@formatjs/intl-locale": ^2.4.40
     "@formatjs/intl-relativetimeformat": ^9.3.2
     "@highcharts/map-collection": 2.0.1
+    "@popperjs/core": ^2.11.7
     "@semantic-release/changelog": 6.0.2
     "@semantic-release/git": 10.0.1
     "@storybook/addon-a11y": 6.5.16
@@ -4929,6 +4930,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@popperjs/core@npm:^2.11.7":
+  version: 2.11.7
+  resolution: "@popperjs/core@npm:2.11.7"
+  checksum: 5b6553747899683452a1d28898c1b39173a4efd780e74360bfcda8eb42f1c5e819602769c81a10920fc68c881d07fb40429604517d499567eac079cfa6470f19
+  languageName: node
+  linkType: hard
+
 "@semantic-release/changelog@npm:6.0.2":
   version: 6.0.2
   resolution: "@semantic-release/changelog@npm:6.0.2"