fix(ui): handle on-screen keyboard visibility to adjust layout and prevent inputs from being obscured

ts_web/elements/sio-combox.ts

@@ -42,6 +42,11 @@ export class SioCombox extends DeesElement {
   @state()
   private accessor selectedConversationId: string | null = null;
 
+  @state()
+  private accessor isKeyboardVisible: boolean = false;
+
+  private keyboardBlurTimeout?: number;
+
   @state()
   private accessor conversations: IConversation[] = [
     {
@@ -127,6 +132,50 @@ export class SioCombox extends DeesElement {
     domtools.DomTools.setupDomTools();
   }
 
+  async connectedCallback() {
+    await super.connectedCallback();
+    this.addEventListener('input-focus', this.handleInputFocus as EventListener);
+    this.addEventListener('input-blur', this.handleInputBlur as EventListener);
+  }
+
+  async disconnectedCallback() {
+    await super.disconnectedCallback();
+    this.removeEventListener('input-focus', this.handleInputFocus as EventListener);
+    this.removeEventListener('input-blur', this.handleInputBlur as EventListener);
+    if (this.keyboardBlurTimeout) {
+      clearTimeout(this.keyboardBlurTimeout);
+    }
+  }
+
+  private handleInputFocus = () => {
+    if (this.keyboardBlurTimeout) {
+      clearTimeout(this.keyboardBlurTimeout);
+      this.keyboardBlurTimeout = undefined;
+    }
+    this.isKeyboardVisible = true;
+  }
+
+  private handleInputBlur = () => {
+    if (this.keyboardBlurTimeout) {
+      clearTimeout(this.keyboardBlurTimeout);
+    }
+    this.keyboardBlurTimeout = window.setTimeout(() => {
+      this.isKeyboardVisible = false;
+      this.keyboardBlurTimeout = undefined;
+    }, 150);
+  }
+
+  updated(changedProperties: Map<string, any>) {
+    super.updated(changedProperties);
+    if (changedProperties.has('isKeyboardVisible')) {
+      if (this.isKeyboardVisible) {
+        this.setAttribute('keyboard-visible', '');
+      } else {
+        this.removeAttribute('keyboard-visible');
+      }
+    }
+  }
+
   public static styles = [
     cssManager.defaultStyles,
     css`
@@ -242,6 +291,12 @@ export class SioCombox extends DeesElement {
         left: 0;
         opacity: 1;
       }
+
+      /* Keyboard visible adjustments */
+      :host([keyboard-visible]) {
+        height: 100vh;
+        height: 100dvh;
+      }
     `),
   ];