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()