mobile: improve virtual keyboard open/close reliability

Hunter
Monday, July 28th, 2025 at 12:26 AM


index.html+9-1


sw.js+1-1
index.html
462  		let initialViewportHeight = window.visualViewport ? window.visualViewport.height : window.innerHeight;
463  		let keyboardOpenThreshold = 150; // pixels
464  		let isEditorFocused = false;
465 +		let wasKeyboardOpen = false;
466  		
467  		function isMobileDevice() {
468  			return window.matchMedia("(pointer: coarse), (pointer: none)").matches;

482  				document.documentElement.style.setProperty('--visible-height', `${currentHeight}px`);
483  				// Match editor background color
484  				document.body.style.backgroundColor = 'var(--editor-bg)';
    -			} else {
485 +				wasKeyboardOpen = true;
486 +			} else if (wasKeyboardOpen && !isKeyboardOpen) {
487 +				// Only run this when transitioning from keyboard open to closed
488  				document.body.classList.remove('mobile-keyboard-open');
489  				// Reset to full viewport height
490  				document.documentElement.style.setProperty('--visible-height', '100vh');
491  				// Reset background color
492  				document.body.style.backgroundColor = '';
493 +				// Blur the editor only if it was focused to prevent keyboard from reopening
494 +				if (isEditorFocused) {
495 +					editorView.contentDOM.blur();
496 +				}
497  				// Update preview when keyboard closes to show any changes made while typing
498  				updatePreview();
499 +				wasKeyboardOpen = false;
500  			}
501  		}
502
sw.js
  -const CACHE_NAME = 'web-workshop-v9';
1 +const CACHE_NAME = 'web-workshop-v10';
2  const urlsToCache = [
3    '/web_workshop/',
4    '/web_workshop/index.html',