remove children autofocus & add Text Input focus

src/components/inspector/controls/ChildrenControl.tsx

@@ -1,26 +1,36 @@
-import React from "react";
-import { Input } from "@chakra-ui/core";
-import FormControl from "./FormControl";
-import { useForm } from "../../../hooks/useForm";
-import usePropsSelector from "../../../hooks/usePropsSelector";
+import React, { useRef, useEffect } from 'react'
+import { Input } from '@chakra-ui/core'
+import FormControl from './FormControl'
+import { useForm } from '../../../hooks/useForm'
+import usePropsSelector from '../../../hooks/usePropsSelector'
+import { useSelector } from 'react-redux'
+import { getShowInputText } from '../../../core/selectors/app'
 
 const ChildrenControl: React.FC = () => {
-  const { setValueFromEvent } = useForm();
-  const children = usePropsSelector("children");
+  const textInput = useRef<HTMLInputElement>(null)
+  const focusInput = useSelector(getShowInputText)
+  const { setValueFromEvent } = useForm()
+  const children = usePropsSelector('children')
+
+  useEffect(() => {
+    if (focusInput && textInput.current) {
+      textInput.current.focus()
+    }
+  }, [focusInput])
 
   return (
     <FormControl htmlFor="children" label="Text">
       <Input
         id="children"
         name="children"
-        autoFocus
         size="sm"
-        value={children || ""}
+        value={children || ''}
         type="text"
         onChange={setValueFromEvent}
+        ref={textInput}
       />
     </FormControl>
-  );
-};
+  )
+}
 
-export default ChildrenControl;
+export default ChildrenControl

src/core/models/app.ts

@@ -5,13 +5,15 @@ type Overlay = undefined | { rect: DOMRect; id: string; type: ComponentType }
 export type AppState = {
   showLayout: boolean
   showCode: boolean
+  focusInputText: boolean
   overlay: undefined | Overlay
 }
 
 const app = createModel({
   state: {
     showLayout: true,
     showCode: false,
+    focusInputText: false,
     overlay: undefined,
   } as AppState,
   reducers: {
@@ -27,6 +29,12 @@ const app = createModel({
         showCode: !state.showCode,
       }
     },
+    toggleInputText(state: AppState): AppState {
+      return {
+        ...state,
+        focusInputText: !state.focusInputText,
+      }
+    },
 
     setOverlay(state: AppState, overlay: Overlay | undefined): AppState {
       return {

src/core/selectors/app.ts

@@ -3,3 +3,5 @@ import { RootState } from '../store'
 export const getShowLayout = (state: RootState) => state.app.showLayout
 
 export const getShowCode = (state: RootState) => state.app.showCode
+
+export const getShowInputText = (state: RootState) => state.app.focusInputText

src/hooks/useInteractive.ts

@@ -21,7 +21,6 @@ export const useInteractive = (
   })
 
   const ref = useRef<HTMLDivElement>(null)
-
   let props = {
     ...component.props,
     onMouseOver: (event: MouseEvent) => {
@@ -35,6 +34,7 @@ export const useInteractive = (
       event.preventDefault()
       event.stopPropagation()
       dispatch.components.select(component.id)
+      dispatch.app.toggleInputText()
     },
   }