Skip to content

Commit

Permalink
[ResizableLayout] Remove onResizeEnd stable callback workaround (el…
Browse files Browse the repository at this point in the history
…astic#176030)

## Summary

This PR reverts the `onResizeEnd` stable callback workaround introduced
in elastic#174955 to account for an EUI bug now that
elastic/eui#7468 has been merged and Kibana was
upgraded to v92.2.1 in elastic#175849.

### Checklist

- [ ] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)
- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [ ] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [ ] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed
- [ ] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [ ] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [ ] If a plugin configuration key changed, check if it needs to be
allowlisted in the cloud and added to the [docker
list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)
- [ ] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [ ] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)

### For maintainers

- [ ] This was checked for breaking API changes and was [labeled
appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
  • Loading branch information
davismcphee authored and fkanout committed Mar 4, 2024
1 parent c2dd8d3 commit 8fa58c2
Showing 1 changed file with 18 additions and 23 deletions.
41 changes: 18 additions & 23 deletions packages/kbn-resizable-layout/src/panels_resizable.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ 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';

Expand Down Expand Up @@ -70,7 +69,7 @@ export const PanelsResizable = ({
euiTheme.border.width.thin,
(x) => x / 2
)};
`;
`;
const defaultButtonCss = css`
z-index: 3;
`;
Expand Down Expand Up @@ -158,31 +157,27 @@ export const PanelsResizable = ({
if (trigger !== 'pointer') {
return;
}

setIsResizing(true);
}, []);

// 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
// use setTimeout to wait until after onClick has been called before blurring.
if (_isResizing) {
if (document.activeElement instanceof HTMLElement) {
const button = document.activeElement;
setTimeout(() => {
button.blur();
});
}
}
return false;
});
});

const onResizeEnd = useCallback(() => {
onResizeEndStable.current();
}, [onResizeEndStable]);
if (!isResizing) {
return;
}

// 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
// use setTimeout to wait until after onClick has been called before blurring.
if (document.activeElement instanceof HTMLElement) {
const button = document.activeElement;
setTimeout(() => {
button.blur();
});
}

setIsResizing(false);
}, [isResizing]);

// Don't render EuiResizableContainer until we have have valid
// panel sizes or it can cause the resize functionality to break.
Expand Down

0 comments on commit 8fa58c2

Please sign in to comment.