Fix / sometimes being cleared from chatbox

src/react-components/room/ChatSidebarContainer.js

@@ -194,10 +194,18 @@ ChatContextProvider.propTypes = {
   messageDispatch: PropTypes.object
 };
 
-export function ChatSidebarContainer({ scene, canSpawnMessages, presences, occupantCount, inputEffect, onClose }) {
+export function ChatSidebarContainer({
+  scene,
+  canSpawnMessages,
+  presences,
+  occupantCount,
+  initialValue,
+  autoFocus,
+  onClose
+}) {
   const { messageGroups, sendMessage, setMessagesRead } = useContext(ChatContext);
   const [onScrollList, listRef, scrolledToBottom] = useMaintainScrollPosition(messageGroups);
-  const [message, setMessage] = useState("");
+  const [message, setMessage] = useState(initialValue || "");
   const [isCommand, setIsCommand] = useState(false);
   const { text_chat: canTextChat } = usePermissions();
   const isMod = useRole("owner");
@@ -262,7 +270,16 @@ export function ChatSidebarContainer({ scene, canSpawnMessages, presences, occup
     [setMessage, inputRef]
   );
 
-  useEffect(() => inputEffect(inputRef.current), [inputEffect, inputRef]);
+  useEffect(() => {
+    if (autoFocus) {
+      inputRef.current.focus();
+      const len = inputRef.current.value.length;
+      inputRef.current.setSelectionRange(len, len);
+    }
+    // We only want this effect to run on initial mount even if autoFocus were to change.
+    // This does not happen in practice, but this is more correct.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   useEffect(() => {
     if (scrolledToBottom) {
@@ -363,7 +380,8 @@ ChatSidebarContainer.propTypes = {
   occupantCount: PropTypes.number.isRequired,
   scene: PropTypes.object.isRequired,
   onClose: PropTypes.func.isRequired,
-  inputEffect: PropTypes.func.isRequired
+  autoFocus: PropTypes.bool,
+  initialValue: PropTypes.string
 };
 
 export function ChatToolbarButtonContainer(props) {

src/react-components/ui-root.js

@@ -203,7 +203,8 @@ class UIRoot extends Component {
     objectSrc: "",
     sidebarId: null,
     presenceCount: 0,
-    chatInputEffect: () => {}
+    chatPrefix: "",
+    chatAutofocus: false
   };
 
   constructor(props) {
@@ -768,7 +769,7 @@ class UIRoot extends Component {
   pushHistoryState = (k, v) => pushHistoryState(this.props.history, k, v);
 
   setSidebar(sidebarId, otherState) {
-    this.setState({ sidebarId, chatInputEffect: () => {}, selectedUserId: null, ...otherState });
+    this.setState({ sidebarId, chatPrefix: "", chatAutofoucs: false, selectedUserId: null, ...otherState });
   }
 
   toggleSidebar(sidebarId, otherState) {
@@ -785,10 +786,8 @@ class UIRoot extends Component {
 
   onFocusChat = e => {
     this.setSidebar("chat", {
-      chatInputEffect: input => {
-        input.focus();
-        input.value = e.detail.prefix;
-      }
+      chatPrefix: e.detail.prefix,
+      chatAutofocus: true
     });
   };
 
@@ -1475,7 +1474,8 @@ class UIRoot extends Component {
                           canSpawnMessages={entered && this.props.hubChannel.can("spawn_and_move_media")}
                           scene={this.props.scene}
                           onClose={() => this.setSidebar(null)}
-                          inputEffect={this.state.chatInputEffect}
+                          autoFocus={this.state.chatAutofocus}
+                          initialValue={this.state.chatPrefix}
                         />
                       )}
                       {this.state.sidebarId === "objects" && (
@@ -1609,7 +1609,9 @@ class UIRoot extends Component {
                         )}
                       </>
                     )}
-                    <ChatToolbarButtonContainer onClick={() => this.toggleSidebar("chat")} />
+                    <ChatToolbarButtonContainer
+                      onClick={() => this.toggleSidebar("chat", { chatPrefix: "", chatAutofocus: false })}
+                    />
                     {entered && isMobileVR && (
                       <ToolbarButton
                         className={styleUtils.hideLg}