[Discover] PR feedback

Request from Davis - use useLatest to make callback gotcha clearer to Kibana devs

packages/kbn-resizable-layout/src/panels_resizable.tsx

@@ -18,6 +18,7 @@ import { css } from '@emotion/react';
 import { isEqual, round } from 'lodash';
 import type { ReactElement } from 'react';
 import React, { useCallback, useEffect, useState } from 'react';
+import useLatest from 'react-use/lib/useLatest';
 import { ResizableLayoutDirection } from '../types';
 import { getContainerSize, percentToPixels, pixelsToPercent } from './utils';
 
@@ -160,7 +161,9 @@ export const PanelsResizable = ({
     setIsResizing(true);
   }, []);
 
-  const onResizeEnd = useCallback(() => {
+  // EUI will call an outdated version of this callback when the resize ends,
+  // so we need to make sure on our end that the latest version is called.
+  const onResizeEndStable = useLatest(() => {
     setIsResizing((_isResizing) => {
       // We don't want the resize button to retain focus after the resize is complete,
       // but EuiResizableContainer will force focus it onClick. To work around this we
@@ -175,7 +178,11 @@ export const PanelsResizable = ({
       }
       return false;
     });
-  }, []);
+  });
+
+  const onResizeEnd = useCallback(() => {
+    onResizeEndStable.current();
+  }, [onResizeEndStable]);
 
   // Don't render EuiResizableContainer until we have have valid
   // panel sizes or it can cause the resize functionality to break.