From 3252798e62a0fff958143374f003dd7a97e511a7 Mon Sep 17 00:00:00 2001 From: Alexander Melo Date: Mon, 26 Aug 2024 11:42:27 -0400 Subject: [PATCH 1/2] fix(EditInPlace): removes focus when pressing esc or enter key --- .../src/components/EditInPlace/EditInPlace.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/ibm-products/src/components/EditInPlace/EditInPlace.tsx b/packages/ibm-products/src/components/EditInPlace/EditInPlace.tsx index 725c848d00..57a24de067 100644 --- a/packages/ibm-products/src/components/EditInPlace/EditInPlace.tsx +++ b/packages/ibm-products/src/components/EditInPlace/EditInPlace.tsx @@ -248,16 +248,21 @@ export let EditInPlace = forwardRef( onCancelHandler(); }; + const removeFocus = () => { + inputRef.current?.blur(); + setFocused(false); + }; + const onKeyHandler = (e) => { // to prevent blur handler from being called twice add additional state to check if escape is being used escaping.current = true; switch (e.key) { case 'Escape': - inputRef.current?.blur(); + removeFocus(); escapeHandler(); break; case 'Enter': - inputRef.current?.blur(); + removeFocus(); returnHandler(); break; default: From 62cd8f27d1bbf55288f51b76223e3f5cab579c40 Mon Sep 17 00:00:00 2001 From: Alexander Melo Date: Tue, 27 Aug 2024 15:55:37 -0400 Subject: [PATCH 2/2] fix: remove focus state on functions --- .../ibm-products/src/components/EditInPlace/EditInPlace.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/ibm-products/src/components/EditInPlace/EditInPlace.tsx b/packages/ibm-products/src/components/EditInPlace/EditInPlace.tsx index 57a24de067..b1d9220dbe 100644 --- a/packages/ibm-products/src/components/EditInPlace/EditInPlace.tsx +++ b/packages/ibm-products/src/components/EditInPlace/EditInPlace.tsx @@ -207,13 +207,11 @@ export let EditInPlace = forwardRef( const onSaveHandler = () => { setInitialValue(value); - setFocused(false); setDirtyInput(false); onSave(); }; const onCancelHandler = () => { - setFocused(false); setDirtyInput(false); onCancel(initialValue); };