fix: react-related fixes (#1050)

* fix: no 'onChange' error

* fix: "document.body is null"

app/assets/javascripts/App.tsx

@@ -28,7 +28,7 @@ import { StartApplication } from './Device/StartApplication'
 import { ApplicationGroup } from './UIModels/ApplicationGroup'
 import { WebOrDesktopDevice } from './Device/WebOrDesktopDevice'
 import { WebApplication } from './UIModels/Application'
-import { createRoot } from 'react-dom/client'
+import { createRoot, Root } from 'react-dom/client'
 
 let keyCount = 0
 const getKey = () => {
@@ -37,11 +37,6 @@ const getKey = () => {
 
 const RootId = 'app-group-root'
 
-const rootElement = document.createElement('div')
-rootElement.id = RootId
-const appendedRootNode = document.body.appendChild(rootElement)
-const root = createRoot(appendedRootNode)
-
 const startApplication: StartApplication = async function startApplication(
   defaultSyncServerHost: string,
   device: WebOrDesktopDevice,
@@ -50,6 +45,7 @@ const startApplication: StartApplication = async function startApplication(
 ) {
   SNLog.onLog = console.log
   SNLog.onError = console.error
+  let root: Root
 
   const onDestroy = () => {
     const rootElement = document.getElementById(RootId) as HTMLElement
@@ -59,6 +55,11 @@ const startApplication: StartApplication = async function startApplication(
   }
 
   const renderApp = () => {
+    const rootElement = document.createElement('div')
+    rootElement.id = RootId
+    const appendedRootNode = document.body.appendChild(rootElement)
+    root = createRoot(appendedRootNode)
+
     root.render(
       <ApplicationGroupView
         key={getKey()}

app/assets/javascripts/Components/AccountMenu/WorkspaceSwitcher/WorkspaceMenuItem.tsx

@@ -4,6 +4,7 @@ import { MenuItemType } from '@/Components/Menu/MenuItemType'
 import { KeyboardKey } from '@/Services/IOService'
 import { ApplicationDescriptor } from '@standardnotes/snjs'
 import {
+  ChangeEventHandler,
   FocusEventHandler,
   FunctionComponent,
   KeyboardEventHandler,
@@ -29,6 +30,7 @@ const WorkspaceMenuItem: FunctionComponent<Props> = ({
   hideOptions,
 }) => {
   const [isRenaming, setIsRenaming] = useState(false)
+  const [inputValue, setInputValue] = useState(descriptor.label)
   const inputRef = useRef<HTMLInputElement>(null)
 
   useEffect(() => {
@@ -37,20 +39,21 @@ const WorkspaceMenuItem: FunctionComponent<Props> = ({
     }
   }, [isRenaming])
 
+  const handleChange: ChangeEventHandler<HTMLInputElement> = useCallback((event) => {
+    setInputValue(event.target.value)
+  }, [])
+
   const handleInputKeyDown: KeyboardEventHandler = useCallback((event) => {
     if (event.key === KeyboardKey.Enter) {
       inputRef.current?.blur()
     }
   }, [])
 
-  const handleInputBlur: FocusEventHandler<HTMLInputElement> = useCallback(
+  const handleInputBlur: FocusEventHandler<HTMLInputElement> = useCallback(() => {
-    (event) => {
+    renameDescriptor(inputValue)
-      const name = event.target.value
+    setIsRenaming(false)
-      renameDescriptor(name)
+    setInputValue('')
-      setIsRenaming(false)
+  }, [inputValue, renameDescriptor])
-    },
-    [renameDescriptor],
-  )
 
   return (
     <MenuItem
@@ -64,7 +67,8 @@ const WorkspaceMenuItem: FunctionComponent<Props> = ({
           <input
             ref={inputRef}
             type="text"
-            value={descriptor.label}
+            value={inputValue}
+            onChange={handleChange}
             onKeyDown={handleInputKeyDown}
             onBlur={handleInputBlur}
           />