diff --git a/packages/entity/src/trait-components/behaved.jsx b/packages/entity/src/trait-components/behaved.jsx index 9215a89..1415dc6 100644 --- a/packages/entity/src/trait-components/behaved.jsx +++ b/packages/entity/src/trait-components/behaved.jsx @@ -29,6 +29,7 @@ const Behaved = ({ editingRef.current?.focus(); }); const [isEditing, setIsEditing] = useState(false); + const [previousKey, setPreviousKey] = useState(false); const previousEditing = usePrevious(isEditing); useEffect(() => { setTimeout(() => { @@ -41,33 +42,39 @@ const Behaved = ({ const tabPanels = []; Object.entries(json.params.routines).forEach(([key, expressions]) => { const routinePath = join(path, 'params/routines', key); + const confirmEdit = () => { + if (isEditing && previousKey !== isEditing) { + patch({ + op: 'move', + from: join(path, 'params/routines', previousKey), + path: join(path, 'params/routines', isEditing), + }); + } + setIsEditing(false); + setPreviousKey(false); + }; tabs.push( { + setPreviousKey(key); setIsEditing(key); }} > { - key === isEditing + key === previousKey ? ( { - setIsEditing(false); - }} + value={isEditing} + onBlur={confirmEdit} onChange={({target: {value}}) => { - patch({ - op: 'move', - from: routinePath, - path: join(path, 'params/routines', value), - }); + setPreviousKey(key); setIsEditing(value); }} onKeyPress={({key}) => { if ('Enter' === key) { - setIsEditing(false); + confirmEdit(); } }} ref={editingRef} @@ -124,6 +131,7 @@ const Behaved = ({ }, }); setIsEditing(name); + setPreviousKey(name); }} type="button" >