Focus chat on T

src/assets/stylesheets/ui-root.scss

@@ -262,7 +262,7 @@
   }
 }
 
-:local(.message-entry-in-room):hover {
+:local(.message-entry-in-room):focus-within {
   opacity: 1.0;
   transition: opacity 0.25s linear;
 

src/hub.html

@@ -32,6 +32,7 @@
         vr-mode-ui="enabled: false"
         stats-plus="false"
         action-to-event__mute="path: /actions/muteMic; event: action_mute;"
+        action-to-event__focus_chat="path: /actions/focusChat; event: action_focus_chat;"
     >
 
         <a-assets>

src/hub.js

@@ -297,6 +297,7 @@ document.addEventListener("DOMContentLoaded", async () => {
 
   registerNetworkSchemas();
   remountUI({ hubChannel, linkChannel, enterScene: entryManager.enterScene, exitScene: entryManager.exitScene });
+  scene.addEventListener("action_focus_chat", () => document.querySelector(".chat-focus-target").focus());
 
   pollForSupportAvailability(isSupportAvailable => remountUI({ isSupportAvailable }));
 

src/react-components/ui-root.js

@@ -690,7 +690,7 @@ class UIRoot extends Component {
           <form onSubmit={this.sendMessage}>
             <div className={styles.messageEntry} style={{ height: pendingMessageFieldHeight }}>
               <textarea
-                className={styles.messageEntryInput}
+                className={classNames([styles.messageEntryInput, "chat-focus-target"])}
                 value={this.state.pendingMessage}
                 rows={textRows}
                 style={{ height: pendingMessageTextareaHeight }}
@@ -699,6 +699,8 @@ class UIRoot extends Component {
                 onKeyDown={e => {
                   if (e.keyCode === 13 && !e.shiftKey) {
                     this.sendMessage(e);
+                  } else if (e.keyCode === 27) {
+                    e.target.blur();
                   }
                 }}
                 placeholder="Send a message..."
@@ -1006,7 +1008,11 @@ class UIRoot extends Component {
               <div className={styles.messageEntryInRoom} style={{ height: pendingMessageFieldHeight }}>
                 <textarea
                   style={{ height: pendingMessageTextareaHeight }}
-                  className={classNames([styles.messageEntryInput, styles.messageEntryInputInRoom])}
+                  className={classNames([
+                    styles.messageEntryInput,
+                    styles.messageEntryInputInRoom,
+                    "chat-focus-target"
+                  ])}
                   value={this.state.pendingMessage}
                   rows={textRows}
                   onFocus={e => e.target.select()}
@@ -1017,6 +1023,8 @@ class UIRoot extends Component {
                   onKeyDown={e => {
                     if (e.keyCode === 13 && !e.shiftKey) {
                       this.sendMessage(e);
+                    } else if (e.keyCode === 27) {
+                      e.target.blur();
                     }
                   }}
                   placeholder="Send a message..."

src/systems/userinput/bindings/keyboard-mouse-user.js

@@ -108,6 +108,15 @@ export const keyboardMouseUserBindings = {
       },
       xform: xforms.rising
     },
+    {
+      src: {
+        value: paths.device.keyboard.key("t")
+      },
+      dest: {
+        value: paths.actions.focusChat
+      },
+      xform: xforms.rising
+    },
     {
       src: {
         value: paths.device.keyboard.key("l")

src/systems/userinput/paths.js

@@ -13,6 +13,7 @@ paths.actions.startGazeTeleport = "/actions/startTeleport";
 paths.actions.stopGazeTeleport = "/actions/stopTeleport";
 paths.actions.spawnPen = "/actions/spawnPen";
 paths.actions.muteMic = "/actions/muteMic";
+paths.actions.focusChat = "/actions/focusChat";
 paths.actions.cursor = {};
 paths.actions.cursor.pose = "/actions/cursorPose";
 paths.actions.cursor.grab = "/actions/cursorGrab";