From 89217c09ffa0aa5a09b8349b3028cec9ad909ef2 Mon Sep 17 00:00:00 2001
From: Davis McPhee <davis.mcphee@elastic.co>
Date: Wed, 14 Sep 2022 23:24:34 -0300
Subject: [PATCH] Call onResizeEnd for keyboard resizes when the resize button
 is blurred

---
 .../resizable_container/resizable_container.test.tsx     | 9 +++++++++
 .../resizable_container/resizable_container.tsx          | 9 ++++++++-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/components/resizable_container/resizable_container.test.tsx b/src/components/resizable_container/resizable_container.test.tsx
index 0d12b9e0c099..8c56ccd0907a 100644
--- a/src/components/resizable_container/resizable_container.test.tsx
+++ b/src/components/resizable_container/resizable_container.test.tsx
@@ -324,4 +324,13 @@ describe('EuiResizableContainer', () => {
     button.simulate('keyup', { key: keys.ARROW_RIGHT });
     expect(onResizeEnd).toHaveBeenCalledTimes(2);
   });
+
+  test('onResizeEnd is called for keyboard resizes when the button is blurred', () => {
+    const { button, onResizeStart, onResizeEnd } = mountWithCallbacks();
+    button.simulate('keydown', { key: keys.ARROW_RIGHT });
+    expect(onResizeStart).toHaveBeenCalledTimes(1);
+    expect(onResizeStart).toHaveBeenLastCalledWith('key');
+    button.simulate('blur');
+    expect(onResizeEnd).toHaveBeenCalledTimes(1);
+  });
 });
diff --git a/src/components/resizable_container/resizable_container.tsx b/src/components/resizable_container/resizable_container.tsx
index 0669e0937fa8..045fa5d46421 100644
--- a/src/components/resizable_container/resizable_container.tsx
+++ b/src/components/resizable_container/resizable_container.tsx
@@ -261,6 +261,13 @@ export const EuiResizableContainer: FunctionComponent<EuiResizableContainerProps
     actions.reset();
   }, [actions, resizeEnd]);
 
+  const onBlur = useCallback(() => {
+    if (resizeContext.current.trigger === 'key') {
+      resizeEnd();
+    }
+    actions.resizerBlur();
+  }, [actions, resizeEnd]);
+
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const EuiResizableButton = useCallback(
     euiResizableButtonWithControls({
@@ -269,7 +276,7 @@ export const EuiResizableContainer: FunctionComponent<EuiResizableContainerProps
       onMouseDown,
       onTouchStart: onMouseDown,
       onFocus: actions.resizerFocus,
-      onBlur: actions.resizerBlur,
+      onBlur,
       isHorizontal,
       registration: {
         register: actions.registerResizer,