From dd7d3e6315f3830b05245cb2b0debeef8c7f8011 Mon Sep 17 00:00:00 2001 From: Pierre Date: Wed, 12 Feb 2020 15:25:59 +0100 Subject: [PATCH 01/11] remove children autofocus & add Text Input focus --- .../inspector/controls/ChildrenControl.tsx | 34 ++++++++++++------- src/core/models/app.ts | 8 +++++ src/core/selectors/app.ts | 2 ++ src/hooks/useInteractive.ts | 2 +- 4 files changed, 33 insertions(+), 13 deletions(-) diff --git a/src/components/inspector/controls/ChildrenControl.tsx b/src/components/inspector/controls/ChildrenControl.tsx index 466f6544c9..5ad3b1e3ee 100644 --- a/src/components/inspector/controls/ChildrenControl.tsx +++ b/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(null) + const focusInput = useSelector(getShowInputText) + const { setValueFromEvent } = useForm() + const children = usePropsSelector('children') + + useEffect(() => { + if (focusInput && textInput.current) { + textInput.current.focus() + } + }, [focusInput]) return ( - ); -}; + ) +} -export default ChildrenControl; +export default ChildrenControl diff --git a/src/core/models/app.ts b/src/core/models/app.ts index dedd8b8072..4786b64f7a 100644 --- a/src/core/models/app.ts +++ b/src/core/models/app.ts @@ -5,6 +5,7 @@ type Overlay = undefined | { rect: DOMRect; id: string; type: ComponentType } export type AppState = { showLayout: boolean showCode: boolean + focusInputText: boolean overlay: undefined | Overlay } @@ -12,6 +13,7 @@ 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 { diff --git a/src/core/selectors/app.ts b/src/core/selectors/app.ts index 5bf4747531..bd0d8108d8 100644 --- a/src/core/selectors/app.ts +++ b/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 diff --git a/src/hooks/useInteractive.ts b/src/hooks/useInteractive.ts index 7e43ecfec7..4ef3e5401a 100644 --- a/src/hooks/useInteractive.ts +++ b/src/hooks/useInteractive.ts @@ -21,7 +21,6 @@ export const useInteractive = ( }) const ref = useRef(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() }, } From a9ad00cf21d404ba7d22c10a5d2ab31a2fa74a02 Mon Sep 17 00:00:00 2001 From: Pierre Date: Wed, 12 Feb 2020 15:37:48 +0100 Subject: [PATCH 02/11] update onDoubleClick --- src/hooks/useInteractive.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/hooks/useInteractive.ts b/src/hooks/useInteractive.ts index 4ef3e5401a..c819d39538 100644 --- a/src/hooks/useInteractive.ts +++ b/src/hooks/useInteractive.ts @@ -34,6 +34,10 @@ export const useInteractive = ( event.preventDefault() event.stopPropagation() dispatch.components.select(component.id) + }, + onDoubleClick: (event: MouseEvent) => { + event.preventDefault() + event.stopPropagation() dispatch.app.toggleInputText() }, } From 7c5fbbd01aef2d57a7ef329170d7a95c839c6849 Mon Sep 17 00:00:00 2001 From: Pierre Date: Wed, 12 Feb 2020 16:59:32 +0100 Subject: [PATCH 03/11] update focus --- src/components/inspector/controls/ChildrenControl.tsx | 11 ++++++++++- src/hooks/useInteractive.ts | 1 + 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/src/components/inspector/controls/ChildrenControl.tsx b/src/components/inspector/controls/ChildrenControl.tsx index 5ad3b1e3ee..bbe0b6a1ec 100644 --- a/src/components/inspector/controls/ChildrenControl.tsx +++ b/src/components/inspector/controls/ChildrenControl.tsx @@ -1,20 +1,28 @@ import React, { useRef, useEffect } from 'react' import { Input } from '@chakra-ui/core' import FormControl from './FormControl' +import useDispatch from '../../../hooks/useDispatch' 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 dispatch = useDispatch() const textInput = useRef(null) const focusInput = useSelector(getShowInputText) const { setValueFromEvent } = useForm() const children = usePropsSelector('children') - + const test = (event: any) => { + if (event.keyCode === 13) { + dispatch.app.toggleInputText(false) + } + } useEffect(() => { if (focusInput && textInput.current) { textInput.current.focus() + } else if (focusInput === false && textInput.current) { + textInput.current.blur() } }, [focusInput]) @@ -28,6 +36,7 @@ const ChildrenControl: React.FC = () => { type="text" onChange={setValueFromEvent} ref={textInput} + onKeyUp={test} /> ) diff --git a/src/hooks/useInteractive.ts b/src/hooks/useInteractive.ts index c819d39538..4fac05d711 100644 --- a/src/hooks/useInteractive.ts +++ b/src/hooks/useInteractive.ts @@ -34,6 +34,7 @@ export const useInteractive = ( event.preventDefault() event.stopPropagation() dispatch.components.select(component.id) + dispatch.app.toggleInputText() }, onDoubleClick: (event: MouseEvent) => { event.preventDefault() From 16102c86e87981e560121276a16d3e8c9242506c Mon Sep 17 00:00:00 2001 From: Pierre Date: Thu, 13 Feb 2020 10:22:36 +0100 Subject: [PATCH 04/11] rename const & fix focus --- src/components/inspector/controls/ChildrenControl.tsx | 6 +++--- src/hooks/useInteractive.ts | 1 - 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/inspector/controls/ChildrenControl.tsx b/src/components/inspector/controls/ChildrenControl.tsx index bbe0b6a1ec..8a87221e36 100644 --- a/src/components/inspector/controls/ChildrenControl.tsx +++ b/src/components/inspector/controls/ChildrenControl.tsx @@ -13,7 +13,7 @@ const ChildrenControl: React.FC = () => { const focusInput = useSelector(getShowInputText) const { setValueFromEvent } = useForm() const children = usePropsSelector('children') - const test = (event: any) => { + const onKeyUp = (event: any) => { if (event.keyCode === 13) { dispatch.app.toggleInputText(false) } @@ -32,11 +32,11 @@ const ChildrenControl: React.FC = () => { id="children" name="children" size="sm" - value={children || ''} + value={children} type="text" onChange={setValueFromEvent} ref={textInput} - onKeyUp={test} + onKeyUp={onKeyUp} /> ) diff --git a/src/hooks/useInteractive.ts b/src/hooks/useInteractive.ts index 4fac05d711..c819d39538 100644 --- a/src/hooks/useInteractive.ts +++ b/src/hooks/useInteractive.ts @@ -34,7 +34,6 @@ export const useInteractive = ( event.preventDefault() event.stopPropagation() dispatch.components.select(component.id) - dispatch.app.toggleInputText() }, onDoubleClick: (event: MouseEvent) => { event.preventDefault() From 724afe884b6a6858e43bbc79d922551fb37f1298 Mon Sep 17 00:00:00 2001 From: Pierre Date: Thu, 13 Feb 2020 11:05:44 +0100 Subject: [PATCH 05/11] fix focus --- src/hooks/useInteractive.ts | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/hooks/useInteractive.ts b/src/hooks/useInteractive.ts index c819d39538..7c1a54a04b 100644 --- a/src/hooks/useInteractive.ts +++ b/src/hooks/useInteractive.ts @@ -7,6 +7,7 @@ import { getIsHovered, } from '../core/selectors/components' import { getShowLayout } from '../core/selectors/app' +import { getShowInputText } from '../core/selectors/app' export const useInteractive = ( component: IComponent, @@ -16,6 +17,8 @@ export const useInteractive = ( const showLayout = useSelector(getShowLayout) const isComponentSelected = useSelector(getIsSelectedComponent(component.id)) const isHovered = useSelector(getIsHovered(component.id)) + const focusInput = useSelector(getShowInputText) + const [, drag] = useDrag({ item: { id: component.id, type: component.type, isMoved: true }, }) @@ -34,11 +37,16 @@ export const useInteractive = ( event.preventDefault() event.stopPropagation() dispatch.components.select(component.id) + if (focusInput === true) { + dispatch.app.toggleInputText() + } }, onDoubleClick: (event: MouseEvent) => { event.preventDefault() event.stopPropagation() - dispatch.app.toggleInputText() + if (focusInput === false) { + dispatch.app.toggleInputText() + } }, } From e4de75557b3e1196e72a74fc4483cec62687baca Mon Sep 17 00:00:00 2001 From: Pierre Date: Thu, 13 Feb 2020 11:51:55 +0100 Subject: [PATCH 06/11] update focus color --- src/core/models/app.ts | 8 ++++++++ src/core/selectors/app.ts | 3 +++ src/hooks/useInteractive.ts | 20 +++++++++++++++++++- 3 files changed, 30 insertions(+), 1 deletion(-) diff --git a/src/core/models/app.ts b/src/core/models/app.ts index 4786b64f7a..1c56eac799 100644 --- a/src/core/models/app.ts +++ b/src/core/models/app.ts @@ -6,6 +6,7 @@ export type AppState = { showLayout: boolean showCode: boolean focusInputText: boolean + useComponentFocused: boolean overlay: undefined | Overlay } @@ -14,6 +15,7 @@ const app = createModel({ showLayout: true, showCode: false, focusInputText: false, + useComponentFocused: false, overlay: undefined, } as AppState, reducers: { @@ -35,6 +37,12 @@ const app = createModel({ focusInputText: !state.focusInputText, } }, + toggleComponentFocused(state: AppState): AppState { + return { + ...state, + useComponentFocused: !state.useComponentFocused, + } + }, setOverlay(state: AppState, overlay: Overlay | undefined): AppState { return { diff --git a/src/core/selectors/app.ts b/src/core/selectors/app.ts index bd0d8108d8..0af9aa2713 100644 --- a/src/core/selectors/app.ts +++ b/src/core/selectors/app.ts @@ -4,4 +4,7 @@ export const getShowLayout = (state: RootState) => state.app.showLayout export const getShowCode = (state: RootState) => state.app.showCode +export const getFocusedComponent = (state: RootState) => + state.app.useComponentFocused + export const getShowInputText = (state: RootState) => state.app.focusInputText diff --git a/src/hooks/useInteractive.ts b/src/hooks/useInteractive.ts index 7c1a54a04b..0632314127 100644 --- a/src/hooks/useInteractive.ts +++ b/src/hooks/useInteractive.ts @@ -8,6 +8,7 @@ import { } from '../core/selectors/components' import { getShowLayout } from '../core/selectors/app' import { getShowInputText } from '../core/selectors/app' +import { getFocusedComponent } from '../core/selectors/app' export const useInteractive = ( component: IComponent, @@ -18,6 +19,7 @@ export const useInteractive = ( const isComponentSelected = useSelector(getIsSelectedComponent(component.id)) const isHovered = useSelector(getIsHovered(component.id)) const focusInput = useSelector(getShowInputText) + const useComponentFocused = useSelector(getFocusedComponent) const [, drag] = useDrag({ item: { id: component.id, type: component.type, isMoved: true }, @@ -37,8 +39,9 @@ export const useInteractive = ( event.preventDefault() event.stopPropagation() dispatch.components.select(component.id) - if (focusInput === true) { + if (focusInput) { dispatch.app.toggleInputText() + dispatch.app.toggleComponentFocused(false) } }, onDoubleClick: (event: MouseEvent) => { @@ -46,6 +49,7 @@ export const useInteractive = ( event.stopPropagation() if (focusInput === false) { dispatch.app.toggleInputText() + dispatch.app.toggleComponentFocused() } }, } @@ -65,5 +69,19 @@ export const useInteractive = ( } } + if (isComponentSelected && focusInput) { + props = { + ...props, + boxShadow: `#4FD1C5 0px 0px 0px 2px inset`, + } + } + + if (useComponentFocused && isComponentSelected) { + props = { + ...props, + boxShadow: `#b80009 0px 0px 0px 2px inset`, + } + } + return { props, ref: drag(ref), drag } } From e1a7be7bc02bf633016770611d0c76947955e96d Mon Sep 17 00:00:00 2001 From: Pierre Date: Thu, 13 Feb 2020 12:05:22 +0100 Subject: [PATCH 07/11] add component id --- src/core/selectors/app.ts | 5 +++-- src/hooks/useInteractive.ts | 4 ++-- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/core/selectors/app.ts b/src/core/selectors/app.ts index 0af9aa2713..cce3f307c4 100644 --- a/src/core/selectors/app.ts +++ b/src/core/selectors/app.ts @@ -4,7 +4,8 @@ export const getShowLayout = (state: RootState) => state.app.showLayout export const getShowCode = (state: RootState) => state.app.showCode -export const getFocusedComponent = (state: RootState) => - state.app.useComponentFocused +export const getFocusedComponent = (id: IComponent['id']) => ( + state: RootState, +) => state.app.useComponentFocused && state.components.present.selectedId === id export const getShowInputText = (state: RootState) => state.app.focusInputText diff --git a/src/hooks/useInteractive.ts b/src/hooks/useInteractive.ts index 0632314127..280d0f557d 100644 --- a/src/hooks/useInteractive.ts +++ b/src/hooks/useInteractive.ts @@ -19,7 +19,7 @@ export const useInteractive = ( const isComponentSelected = useSelector(getIsSelectedComponent(component.id)) const isHovered = useSelector(getIsHovered(component.id)) const focusInput = useSelector(getShowInputText) - const useComponentFocused = useSelector(getFocusedComponent) + const useComponentFocused = useSelector(getFocusedComponent(component.id)) const [, drag] = useDrag({ item: { id: component.id, type: component.type, isMoved: true }, @@ -76,7 +76,7 @@ export const useInteractive = ( } } - if (useComponentFocused && isComponentSelected) { + if (useComponentFocused) { props = { ...props, boxShadow: `#b80009 0px 0px 0px 2px inset`, From 3e31879f886e4c02969901aa3565ec2ac82f5154 Mon Sep 17 00:00:00 2001 From: Pierre Date: Thu, 13 Feb 2020 14:50:28 +0100 Subject: [PATCH 08/11] update focus --- .../inspector/controls/ChildrenControl.tsx | 4 +-- src/core/models/app.ts | 14 ++------- src/core/selectors/app.ts | 5 ++-- src/hooks/useInteractive.ts | 29 +++++-------------- 4 files changed, 16 insertions(+), 36 deletions(-) diff --git a/src/components/inspector/controls/ChildrenControl.tsx b/src/components/inspector/controls/ChildrenControl.tsx index 8a87221e36..e93bad3289 100644 --- a/src/components/inspector/controls/ChildrenControl.tsx +++ b/src/components/inspector/controls/ChildrenControl.tsx @@ -5,12 +5,12 @@ import useDispatch from '../../../hooks/useDispatch' import { useForm } from '../../../hooks/useForm' import usePropsSelector from '../../../hooks/usePropsSelector' import { useSelector } from 'react-redux' -import { getShowInputText } from '../../../core/selectors/app' +import { getInputTextFocused } from '../../../core/selectors/app' const ChildrenControl: React.FC = () => { const dispatch = useDispatch() const textInput = useRef(null) - const focusInput = useSelector(getShowInputText) + const focusInput = useSelector(getInputTextFocused) const { setValueFromEvent } = useForm() const children = usePropsSelector('children') const onKeyUp = (event: any) => { diff --git a/src/core/models/app.ts b/src/core/models/app.ts index 1c56eac799..61bc63aafa 100644 --- a/src/core/models/app.ts +++ b/src/core/models/app.ts @@ -5,8 +5,7 @@ type Overlay = undefined | { rect: DOMRect; id: string; type: ComponentType } export type AppState = { showLayout: boolean showCode: boolean - focusInputText: boolean - useComponentFocused: boolean + inputTextFocused: boolean overlay: undefined | Overlay } @@ -14,8 +13,7 @@ const app = createModel({ state: { showLayout: true, showCode: false, - focusInputText: false, - useComponentFocused: false, + inputTextFocused: false, overlay: undefined, } as AppState, reducers: { @@ -34,13 +32,7 @@ const app = createModel({ toggleInputText(state: AppState): AppState { return { ...state, - focusInputText: !state.focusInputText, - } - }, - toggleComponentFocused(state: AppState): AppState { - return { - ...state, - useComponentFocused: !state.useComponentFocused, + inputTextFocused: !state.inputTextFocused, } }, diff --git a/src/core/selectors/app.ts b/src/core/selectors/app.ts index cce3f307c4..ca55026f69 100644 --- a/src/core/selectors/app.ts +++ b/src/core/selectors/app.ts @@ -6,6 +6,7 @@ export const getShowCode = (state: RootState) => state.app.showCode export const getFocusedComponent = (id: IComponent['id']) => ( state: RootState, -) => state.app.useComponentFocused && state.components.present.selectedId === id +) => state.app.inputTextFocused && state.components.present.selectedId === id -export const getShowInputText = (state: RootState) => state.app.focusInputText +export const getInputTextFocused = (state: RootState) => + state.app.inputTextFocused diff --git a/src/hooks/useInteractive.ts b/src/hooks/useInteractive.ts index 280d0f557d..43c0e063e6 100644 --- a/src/hooks/useInteractive.ts +++ b/src/hooks/useInteractive.ts @@ -6,9 +6,8 @@ import { getIsSelectedComponent, getIsHovered, } from '../core/selectors/components' -import { getShowLayout } from '../core/selectors/app' -import { getShowInputText } from '../core/selectors/app' -import { getFocusedComponent } from '../core/selectors/app' +import { getShowLayout, getFocusedComponent } from '../core/selectors/app' +import { getInputTextFocused } from '../core/selectors/app' export const useInteractive = ( component: IComponent, @@ -18,7 +17,7 @@ export const useInteractive = ( const showLayout = useSelector(getShowLayout) const isComponentSelected = useSelector(getIsSelectedComponent(component.id)) const isHovered = useSelector(getIsHovered(component.id)) - const focusInput = useSelector(getShowInputText) + const focusInput = useSelector(getInputTextFocused) const useComponentFocused = useSelector(getFocusedComponent(component.id)) const [, drag] = useDrag({ @@ -34,6 +33,9 @@ export const useInteractive = ( }, onMouseOut: () => { dispatch.components.unhover() + if (focusInput) { + dispatch.app.toggleInputText() + } }, onClick: (event: MouseEvent) => { event.preventDefault() @@ -41,7 +43,6 @@ export const useInteractive = ( dispatch.components.select(component.id) if (focusInput) { dispatch.app.toggleInputText() - dispatch.app.toggleComponentFocused(false) } }, onDoubleClick: (event: MouseEvent) => { @@ -49,10 +50,10 @@ export const useInteractive = ( event.stopPropagation() if (focusInput === false) { dispatch.app.toggleInputText() - dispatch.app.toggleComponentFocused() } }, } + console.log(focusInput) if (showLayout && enableVisualHelper) { props = { @@ -65,21 +66,7 @@ export const useInteractive = ( if (isHovered || isComponentSelected) { props = { ...props, - boxShadow: `#4FD1C5 0px 0px 0px 2px inset`, - } - } - - if (isComponentSelected && focusInput) { - props = { - ...props, - boxShadow: `#4FD1C5 0px 0px 0px 2px inset`, - } - } - - if (useComponentFocused) { - props = { - ...props, - boxShadow: `#b80009 0px 0px 0px 2px inset`, + boxShadow: `${focusInput ? '#ffc4c7' : '#4FD1C5'} 0px 0px 0px 2px inset`, } } From 28d45b3dd2e331b571e8b61c72b2b6d7e756f2c8 Mon Sep 17 00:00:00 2001 From: Pierre Date: Thu, 13 Feb 2020 14:55:13 +0100 Subject: [PATCH 09/11] remove console.log --- src/hooks/useInteractive.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/hooks/useInteractive.ts b/src/hooks/useInteractive.ts index 43c0e063e6..75d1932d0a 100644 --- a/src/hooks/useInteractive.ts +++ b/src/hooks/useInteractive.ts @@ -53,7 +53,6 @@ export const useInteractive = ( } }, } - console.log(focusInput) if (showLayout && enableVisualHelper) { props = { From f71ee714f45ce015458eb5da45bf0224f2d91b97 Mon Sep 17 00:00:00 2001 From: Pierre Date: Thu, 13 Feb 2020 15:46:35 +0100 Subject: [PATCH 10/11] update focus onMouse --- src/hooks/useInteractive.ts | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/hooks/useInteractive.ts b/src/hooks/useInteractive.ts index 75d1932d0a..cffc96b2bc 100644 --- a/src/hooks/useInteractive.ts +++ b/src/hooks/useInteractive.ts @@ -7,7 +7,6 @@ import { getIsHovered, } from '../core/selectors/components' import { getShowLayout, getFocusedComponent } from '../core/selectors/app' -import { getInputTextFocused } from '../core/selectors/app' export const useInteractive = ( component: IComponent, @@ -17,8 +16,7 @@ export const useInteractive = ( const showLayout = useSelector(getShowLayout) const isComponentSelected = useSelector(getIsSelectedComponent(component.id)) const isHovered = useSelector(getIsHovered(component.id)) - const focusInput = useSelector(getInputTextFocused) - const useComponentFocused = useSelector(getFocusedComponent(component.id)) + const focusInput = useSelector(getFocusedComponent(component.id)) const [, drag] = useDrag({ item: { id: component.id, type: component.type, isMoved: true }, @@ -33,9 +31,6 @@ export const useInteractive = ( }, onMouseOut: () => { dispatch.components.unhover() - if (focusInput) { - dispatch.app.toggleInputText() - } }, onClick: (event: MouseEvent) => { event.preventDefault() From f35cf3dcfda489019d55a87ecfe9362f217fd37a Mon Sep 17 00:00:00 2001 From: Pierre Date: Thu, 13 Feb 2020 16:15:22 +0100 Subject: [PATCH 11/11] update focus --- src/components/inspector/controls/ChildrenControl.tsx | 11 +++++++---- src/hooks/useInteractive.ts | 3 --- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/inspector/controls/ChildrenControl.tsx b/src/components/inspector/controls/ChildrenControl.tsx index e93bad3289..439ead936b 100644 --- a/src/components/inspector/controls/ChildrenControl.tsx +++ b/src/components/inspector/controls/ChildrenControl.tsx @@ -1,4 +1,4 @@ -import React, { useRef, useEffect } from 'react' +import React, { useRef, useEffect, KeyboardEvent } from 'react' import { Input } from '@chakra-ui/core' import FormControl from './FormControl' import useDispatch from '../../../hooks/useDispatch' @@ -13,9 +13,9 @@ const ChildrenControl: React.FC = () => { const focusInput = useSelector(getInputTextFocused) const { setValueFromEvent } = useForm() const children = usePropsSelector('children') - const onKeyUp = (event: any) => { - if (event.keyCode === 13) { - dispatch.app.toggleInputText(false) + const onKeyUp = (event: KeyboardEvent) => { + if (event.keyCode === 13 && textInput.current) { + textInput.current.blur() } } useEffect(() => { @@ -37,6 +37,9 @@ const ChildrenControl: React.FC = () => { onChange={setValueFromEvent} ref={textInput} onKeyUp={onKeyUp} + onBlur={() => { + dispatch.app.toggleInputText(false) + }} /> ) diff --git a/src/hooks/useInteractive.ts b/src/hooks/useInteractive.ts index cffc96b2bc..625ae5b20c 100644 --- a/src/hooks/useInteractive.ts +++ b/src/hooks/useInteractive.ts @@ -36,9 +36,6 @@ export const useInteractive = ( event.preventDefault() event.stopPropagation() dispatch.components.select(component.id) - if (focusInput) { - dispatch.app.toggleInputText() - } }, onDoubleClick: (event: MouseEvent) => { event.preventDefault()