@trustquery/browser 0.2.9 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trustquery/browser",
-  "version": "0.2.9",
+  "version": "0.3.0",
   "description": "Turn any textarea into an interactive trigger-based editor with inline styling",
   "type": "module",
   "main": "dist/trustquery.js",
@@ -36,7 +36,7 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/RonItelman/trustquery-browser.git"
+    "url": "git+https://github.com/RonItelman/trustquery-browser.git"
   },
   "bugs": {
     "url": "https://github.com/RonItelman/trustquery-browser/issues"

package/src/DropdownManager.js

@@ -102,8 +102,9 @@ export default class DropdownManager {
     // Setup keyboard navigation
     this.setupKeyboardHandlers();
 
-    // Close on click outside
+    // Close on click outside (using mousedown to match icon behavior)
     setTimeout(() => {
+      document.addEventListener('mousedown', this.closeDropdownHandler);
       document.addEventListener('click', this.closeDropdownHandler);
     }, 0);
 
@@ -428,6 +429,7 @@ export default class DropdownManager {
       this.dropdownOptions = null;
       this.dropdownMatchData = null;
       this.selectedDropdownIndex = 0;
+      document.removeEventListener('mousedown', this.closeDropdownHandler);
       document.removeEventListener('click', this.closeDropdownHandler);
       document.removeEventListener('keydown', this.keyboardHandler);
     }
@@ -437,8 +439,12 @@ export default class DropdownManager {
    * Close dropdown handler (bound to document)
    */
   closeDropdownHandler = (e) => {
-    // Only close if clicking outside the dropdown
+    // Only close if clicking outside the dropdown AND not on the trigger element
     if (this.activeDropdown && !this.activeDropdown.contains(e.target)) {
+      // Check if clicking on the trigger element itself - don't close in that case
+      if (this.activeDropdownMatch && (this.activeDropdownMatch === e.target || this.activeDropdownMatch.contains(e.target))) {
+        return;
+      }
       this.hideDropdown();
     }
   }

package/src/MobileKeyboardHandler.js

@@ -0,0 +1,240 @@
+// MobileKeyboardHandler - Handles mobile virtual keyboard behavior
+// Detects keyboard appearance and adjusts layout to keep textarea visible
+
+export default class MobileKeyboardHandler {
+  /**
+   * Create mobile keyboard handler
+   * @param {Object} options - Configuration options
+   */
+  constructor(options = {}) {
+    this.options = {
+      textarea: options.textarea || null,
+      wrapper: options.wrapper || null,
+      debug: options.debug || false,
+      ...options
+    };
+
+    this.isKeyboardVisible = false;
+    this.lastViewportHeight = window.innerHeight;
+    this.visualViewport = window.visualViewport;
+
+    if (this.options.debug) {
+      console.log('[MobileKeyboardHandler] Initialized');
+    }
+  }
+
+  /**
+   * Initialize keyboard detection
+   */
+  init() {
+    if (!this.options.textarea) {
+      console.warn('[MobileKeyboardHandler] No textarea provided');
+      return;
+    }
+
+    // Use Visual Viewport API if available (preferred method)
+    if (this.visualViewport) {
+      this.visualViewport.addEventListener('resize', this.handleViewportResize);
+      this.visualViewport.addEventListener('scroll', this.handleViewportScroll);
+
+      if (this.options.debug) {
+        console.log('[MobileKeyboardHandler] Using Visual Viewport API');
+      }
+    } else {
+      // Fallback to window resize
+      window.addEventListener('resize', this.handleWindowResize);
+
+      if (this.options.debug) {
+        console.log('[MobileKeyboardHandler] Using window resize fallback');
+      }
+    }
+
+    // Handle focus events
+    this.options.textarea.addEventListener('focus', this.handleFocus);
+    this.options.textarea.addEventListener('blur', this.handleBlur);
+  }
+
+  /**
+   * Handle Visual Viewport resize (keyboard appearance/disappearance)
+   */
+  handleViewportResize = () => {
+    if (!this.visualViewport) return;
+
+    const viewportHeight = this.visualViewport.height;
+    const windowHeight = window.innerHeight;
+
+    if (this.options.debug) {
+      console.log('[MobileKeyboardHandler] Viewport resize:', {
+        viewportHeight,
+        windowHeight,
+        scale: this.visualViewport.scale
+      });
+    }
+
+    // Keyboard is visible if viewport height is significantly smaller than window height
+    const wasKeyboardVisible = this.isKeyboardVisible;
+    this.isKeyboardVisible = viewportHeight < windowHeight * 0.75;
+
+    if (this.isKeyboardVisible !== wasKeyboardVisible) {
+      if (this.isKeyboardVisible) {
+        this.onKeyboardShow();
+      } else {
+        this.onKeyboardHide();
+      }
+    }
+
+    // Always adjust layout when viewport changes
+    if (this.isKeyboardVisible) {
+      this.adjustLayout();
+    }
+  };
+
+  /**
+   * Handle Visual Viewport scroll
+   */
+  handleViewportScroll = () => {
+    if (this.isKeyboardVisible) {
+      // Ensure textarea stays in view during scroll
+      this.ensureTextareaVisible();
+    }
+  };
+
+  /**
+   * Handle window resize (fallback)
+   */
+  handleWindowResize = () => {
+    const currentHeight = window.innerHeight;
+    const heightDifference = this.lastViewportHeight - currentHeight;
+
+    if (this.options.debug) {
+      console.log('[MobileKeyboardHandler] Window resize:', {
+        lastHeight: this.lastViewportHeight,
+        currentHeight,
+        difference: heightDifference
+      });
+    }
+
+    // Significant decrease in height suggests keyboard appeared
+    if (heightDifference > 150) {
+      if (!this.isKeyboardVisible) {
+        this.isKeyboardVisible = true;
+        this.onKeyboardShow();
+      }
+    }
+    // Significant increase suggests keyboard hidden
+    else if (heightDifference < -150) {
+      if (this.isKeyboardVisible) {
+        this.isKeyboardVisible = false;
+        this.onKeyboardHide();
+      }
+    }
+
+    this.lastViewportHeight = currentHeight;
+  };
+
+  /**
+   * Handle textarea focus
+   */
+  handleFocus = () => {
+    if (this.options.debug) {
+      console.log('[MobileKeyboardHandler] Textarea focused');
+    }
+
+    // Delay to allow keyboard to appear
+    setTimeout(() => {
+      this.ensureTextareaVisible();
+    }, 300);
+  };
+
+  /**
+   * Handle textarea blur
+   */
+  handleBlur = () => {
+    if (this.options.debug) {
+      console.log('[MobileKeyboardHandler] Textarea blurred');
+    }
+  };
+
+  /**
+   * Called when keyboard appears
+   */
+  onKeyboardShow() {
+    if (this.options.debug) {
+      console.log('[MobileKeyboardHandler] Keyboard shown');
+    }
+
+    this.adjustLayout();
+    this.ensureTextareaVisible();
+  }
+
+  /**
+   * Called when keyboard hides
+   */
+  onKeyboardHide() {
+    if (this.options.debug) {
+      console.log('[MobileKeyboardHandler] Keyboard hidden');
+    }
+
+    // Reset wrapper height to auto
+    if (this.options.wrapper) {
+      this.options.wrapper.style.maxHeight = '';
+    }
+  }
+
+  /**
+   * Adjust layout to accommodate keyboard
+   */
+  adjustLayout() {
+    if (!this.visualViewport || !this.options.wrapper) return;
+
+    const viewportHeight = this.visualViewport.height;
+
+    // Set wrapper max-height to visible viewport height minus some padding
+    const maxHeight = viewportHeight - 20; // 20px padding
+    this.options.wrapper.style.maxHeight = `${maxHeight}px`;
+    this.options.wrapper.style.overflow = 'auto';
+
+    if (this.options.debug) {
+      console.log('[MobileKeyboardHandler] Adjusted wrapper height:', maxHeight);
+    }
+  }
+
+  /**
+   * Ensure textarea is visible above the keyboard
+   */
+  ensureTextareaVisible() {
+    if (!this.options.textarea) return;
+
+    // Scroll textarea into view
+    this.options.textarea.scrollIntoView({
+      behavior: 'smooth',
+      block: 'center',
+      inline: 'nearest'
+    });
+
+    if (this.options.debug) {
+      console.log('[MobileKeyboardHandler] Scrolled textarea into view');
+    }
+  }
+
+  /**
+   * Cleanup event listeners
+   */
+  destroy() {
+    if (this.visualViewport) {
+      this.visualViewport.removeEventListener('resize', this.handleViewportResize);
+      this.visualViewport.removeEventListener('scroll', this.handleViewportScroll);
+    } else {
+      window.removeEventListener('resize', this.handleWindowResize);
+    }
+
+    if (this.options.textarea) {
+      this.options.textarea.removeEventListener('focus', this.handleFocus);
+      this.options.textarea.removeEventListener('blur', this.handleBlur);
+    }
+
+    if (this.options.debug) {
+      console.log('[MobileKeyboardHandler] Destroyed');
+    }
+  }
+}

package/src/TrustQuery.js

@@ -8,6 +8,7 @@ import StyleManager from './StyleManager.js';
 import CommandHandlerRegistry from './CommandHandlers.js';
 import AutoGrow from './AutoGrow.js';
 import ValidationStateManager from './ValidationStateManager.js';
+import MobileKeyboardHandler from './MobileKeyboardHandler.js';
 
 export default class TrustQuery {
   // Store all instances
@@ -212,6 +213,17 @@ export default class TrustQuery {
       console.log('[TrustQuery] AutoGrow feature enabled');
     }
 
+    // Mobile keyboard handler (enabled by default, can be disabled via options)
+    if (this.options.mobileKeyboard !== false) {
+      this.features.mobileKeyboard = new MobileKeyboardHandler({
+        textarea: this.textarea,
+        wrapper: this.wrapper,
+        debug: this.options.debug
+      });
+      this.features.mobileKeyboard.init();
+      console.log('[TrustQuery] Mobile keyboard handler enabled');
+    }
+
     // Debug logging feature
     if (this.options.debug) {
       this.enableDebugLogging();
@@ -502,6 +514,16 @@ export default class TrustQuery {
       this.interactionHandler.destroy();
     }
 
+    // Cleanup mobile keyboard handler
+    if (this.features.mobileKeyboard) {
+      this.features.mobileKeyboard.destroy();
+    }
+
+    // Cleanup auto-grow
+    if (this.features.autoGrow) {
+      this.features.autoGrow.destroy();
+    }
+
     // Unwrap textarea
     const parent = this.wrapper.parentNode;
     parent.insertBefore(this.textarea, this.wrapper);