fix(uui-combobox): fix for small resolutions (#327)

* added phone overlay with media query

* make it more readable on phone

* phone wrapper is now fixed so it works inside form layouts

* add property to hold the close button text

Co-authored-by: Jesper Møller Jensen <[email protected]>
Co-authored-by: Jacob Overgaard <[email protected]>

Author: 3 people

packages/uui-combobox/lib/uui-combobox.element.ts

@@ -30,7 +30,6 @@ export class UUIComboboxElement extends FormControlMixin(LitElement) {
   static styles = [
     css`
       :host {
-        position: relative;
         display: inline-block;
       }
 
@@ -40,8 +39,9 @@ export class UUIComboboxElement extends FormControlMixin(LitElement) {
       }
 
       #scroll-container {
-        max-height: var(--uui-combobox-popover-max-height, 500px);
         overflow-y: auto;
+        width: 100%;
+        max-height: var(--uui-combobox-popover-max-height, 500px);
       }
 
       #dropdown {
@@ -66,6 +66,32 @@ export class UUIComboboxElement extends FormControlMixin(LitElement) {
         flex-shrink: 0;
         margin-top: -1px;
       }
+
+      #phone-wrapper {
+        position: fixed;
+        inset: 0;
+        display: flex;
+        flex-direction: column;
+        z-index: 1;
+        font-size: 1.1em;
+      }
+
+      #phone-wrapper #dropdown {
+        display: flex;
+      }
+
+      #phone-wrapper #combobox-input {
+        height: var(--uui-size-16);
+      }
+
+      #phone-wrapper > uui-button {
+        height: var(--uui-size-14);
+        width: 100%;
+      }
+
+      #phone-wrapper #scroll-container {
+        max-height: unset;
+      }
     `,
   ];
 
@@ -106,6 +132,15 @@ export class UUIComboboxElement extends FormControlMixin(LitElement) {
   @property({ type: Boolean })
   public open = false;
 
+  /**
+   * Specifies the button label for the close button in mobile mode
+   * @type { string }
+   * @attr
+   * @default "Close"
+   */
+  @property({ type: String })
+  public closeLabel = 'Close';
+
   @query('#combobox-input')
   private _input!: HTMLInputElement;
 
@@ -116,18 +151,27 @@ export class UUIComboboxElement extends FormControlMixin(LitElement) {
   private _comboboxListElements?: UUIComboboxListElement[];
 
   private _comboboxList!: UUIComboboxListElement;
+  private phoneMediaQuery!: MediaQueryList;
+
   @state()
   private _displayValue = '';
 
   @state()
   private _search = '';
 
+  @state()
+  private _isPhone = false;
+
   connectedCallback(): void {
     super.connectedCallback();
 
     this.addEventListener('blur', this._onBlur);
     this.addEventListener('mousedown', this._onMouseDown);
 
+    this.phoneMediaQuery = window.matchMedia('(max-width: 600px)');
+    this._onPhoneChange();
+    this.phoneMediaQuery.addEventListener('change', this._onPhoneChange);
+
     demandCustomElement(this, 'uui-icon');
     demandCustomElement(this, 'uui-input');
     demandCustomElement(this, 'uui-button');
@@ -141,6 +185,7 @@ export class UUIComboboxElement extends FormControlMixin(LitElement) {
 
     this.removeEventListener('blur', this._onBlur);
     this.removeEventListener('mousedown', this._onMouseDown);
+    this.phoneMediaQuery.removeEventListener('change', this._onPhoneChange);
   }
 
   protected async firstUpdated() {
@@ -161,6 +206,10 @@ export class UUIComboboxElement extends FormControlMixin(LitElement) {
     }
   }
 
+  private _onPhoneChange = () => {
+    this._isPhone = this.phoneMediaQuery.matches;
+  };
+
   private _updateValue(value: string) {
     if (this._comboboxList) {
       this._comboboxList.value = value;
@@ -295,14 +344,23 @@ export class UUIComboboxElement extends FormControlMixin(LitElement) {
   };
 
   render() {
-    return html`
-      <uui-popover
-        .open=${this.open}
-        .margin=${-1}
-        @close=${() => this._onClose()}>
+    if (this._isPhone && this.open) {
+      return html` <div id="phone-wrapper">
+        <uui-button label="close" look="primary" @click=${this._onClose}>
+          ${this.closeLabel}
+        </uui-button>
         ${this._renderInput()} ${this._renderDropdown()}
-      </uui-popover>
-    `;
+      </div>`;
+    } else {
+      return html`
+        <uui-popover
+          .open=${this.open}
+          .margin=${-1}
+          @close=${() => this._onClose()}>
+          ${this._renderInput()} ${this._renderDropdown()}
+        </uui-popover>
+      `;
+    }
   }
 }