Call onResizeEnd for keyboard resizes when the resize button is blurred

elastic · Sep 15, 2022 · 89217c0 · 89217c0
1 parent e9dca6f
commit 89217c0
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 1 deletion.
diff --git 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
@@ -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,