prevent header from hiding when keyboard is active on mobile for username change

webroot/js/app.js

@@ -50,6 +50,7 @@ export default class App extends Component {
       displayChat: chatStorage === null ? true : chatStorage,
       chatInputEnabled: false, // chat input box state
       username: getLocalStorage(KEY_USERNAME) || generateUsername(),
+      touchKeyboardActive: false,
 
       configData: {},
       extraPageContent: '',
@@ -78,6 +79,8 @@ export default class App extends Component {
     // misc dom events
     this.handleChatPanelToggle = this.handleChatPanelToggle.bind(this);
     this.handleUsernameChange = this.handleUsernameChange.bind(this);
+    this.handleFormFocus = this.handleFormFocus.bind(this);
+    this.handleFormBlur = this.handleFormBlur.bind(this);
     this.handleWindowResize = debounce(this.handleWindowResize.bind(this), 250);
 
     this.handleOfflineMode = this.handleOfflineMode.bind(this);
@@ -284,6 +287,22 @@ export default class App extends Component {
     });
   }
 
+  handleFormFocus() {
+    if (this.hasTouchScreen) {
+      this.setState({
+        touchKeyboardActive: true,
+      });
+    }
+  }
+
+  handleFormBlur() {
+    if (this.hasTouchScreen) {
+      this.setState({
+        touchKeyboardActive: false,
+      });
+    }
+  }
+
   handleChatPanelToggle() {
     const { displayChat: curDisplayed } = this.state;
 
@@ -326,6 +345,7 @@ export default class App extends Component {
       playerActive,
       streamOnline,
       streamStatusMessage,
+      touchKeyboardActive,
       username,
       viewerCount,
       websocket,
@@ -373,6 +393,7 @@ export default class App extends Component {
       'bg-gray-800': singleColMode && displayChat,
       'short-wide': shortHeight && windowWidth > WIDTH_SINGLE_COL,
       'touch-screen': this.hasTouchScreen,
+      'touch-keyboard-active': touchKeyboardActive,
     });
 
     const poster = isPlaying ? null : html`
@@ -407,7 +428,9 @@ export default class App extends Component {
             >
               <${UsernameForm}
                 username=${username}
-                handleUsernameChange=${this.handleUsernameChange}
+                onUsernameChange=${this.handleUsernameChange}
+                onFocus=${this.handleFormFocus}
+                onBlur=${this.handleFormBlur}
               />
               <button
                 type="button"

webroot/js/components/chat/username.js

@@ -11,6 +11,7 @@ export default class UsernameForm extends Component {
 
     this.state = {
       displayForm: false,
+      isFocused: false,
     };
 
     this.textInput = createRef();
@@ -19,6 +20,8 @@ export default class UsernameForm extends Component {
     this.handleDisplayForm = this.handleDisplayForm.bind(this);
     this.handleHideForm = this.handleHideForm.bind(this);
     this.handleUpdateUsername = this.handleUpdateUsername.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+    this.handleBlur = this.handleBlur.bind(this);
   }
 
   handleDisplayForm() {
@@ -43,17 +46,30 @@ export default class UsernameForm extends Component {
   }
 
   handleUpdateUsername() {
-    const { username: curName, handleUsernameChange } = this.props;
+    const { username: curName, onUsernameChange } = this.props;
     let newName = this.textInput.current.value;
     newName = newName.trim();
     if (newName !== '' && newName !== curName) {
       setLocalStorage(KEY_USERNAME, newName);
-      if (handleUsernameChange) {
+      if (onUsernameChange) {
-        handleUsernameChange(newName);
+        onUsernameChange(newName);
       }
       this.handleHideForm();
     }
+  }
 
+  handleFocus() {
+    const { onFocus } = this.props;
+    if (onFocus) {
+      onFocus();
+    }
+  }
+
+  handleBlur() {
+    const { onBlur } = this.props;
+    if (onBlur) {
+      onBlur();
+    }
  }
 
   render(props, state) {
@@ -86,6 +102,8 @@ export default class UsernameForm extends Component {
               placeholder="Update username"
               defaultValue=${username}
               onKeydown=${this.handleKeydown}
+              onFocus=${this.handleFocus}
+              onBlur=${this.handleBlur}
               ref=${this.textInput}
             />
             <button id="button-update-username" onClick=${this.handleUpdateUsername}  type="button" class="bg-blue-500 hover:bg-blue-700 text-white text-xs uppercase p-1 mx-1 rounded cursor-pointer user-btn">Update</button>

webroot/styles/app.css

@@ -202,10 +202,10 @@ header {
 }
 
 @media screen and (max-height: 500px) {
-  .single-col.touch-screen {
+  .single-col.touch-screen:not(.touch-keyboard-active) {
     --header-height: 0px;
   }
-  .single-col.touch-screen header {
+  .single-col.touch-screen:not(.touch-keyboard-active) header {
     display: none;
   }
 }