elastic · 1Copenut · Dec 2, 2022 · Nov 21, 2022 · Nov 21, 2022 · Nov 21, 2022
diff --git a/package.json b/package.json
@@ -108,7 +108,7 @@
     "@elastic/datemath": "5.0.3",
     "@elastic/elasticsearch": "npm:@elastic/[email protected]",
     "@elastic/ems-client": "8.3.3",
-    "@elastic/eui": "70.2.4",
+    "@elastic/eui": "70.4.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/node-crypto": "1.2.1",
     "@elastic/numeral": "^2.5.1",
@@ -613,7 +613,7 @@
     "react-dom": "^17.0.2",
     "react-dropzone": "^4.2.9",
     "react-fast-compare": "^2.0.4",
-    "react-focus-on": "^3.6.0",
+    "react-focus-on": "^3.7.0",
     "react-grid-layout": "^1.3.4",
     "react-hook-form": "^7.39.5",
     "react-intl": "^2.8.0",

@@ -84,6 +84,6 @@ export const LICENSE_OVERRIDES = {
   '[email protected]': ['Eclipse Distribution License - v 1.0'], // cf. https://github.com/bjornharrtell/jsts
   '@mapbox/[email protected]': ['MIT'], // license in readme https://github.com/tmcw/jsonlint
   '@elastic/[email protected]': ['Elastic License 2.0'],
-  '@elastic/eui@70.2.4': ['SSPL-1.0 OR Elastic License 2.0'],
+  '@elastic/eui@70.4.0': ['SSPL-1.0 OR Elastic License 2.0'],
   '[email protected]': ['CC-BY-4.0'], // retired ODC‑By license https://github.com/mattcg/language-subtag-registry
 };
@@ -75,7 +75,7 @@ describe('NoDataPopover', () => {
     };
     const instance = mount(<NoDataPopover {...props} />);
     act(() => {
-      instance.find(EuiTourStep).prop('footerAction')!.props.onClick();
+      instance.find('button[data-test-subj="noDataPopoverDismissButton"]').simulate('click');
     });
     instance.setProps({ ...props });
     expect(props.storage.set).toHaveBeenCalledWith(expect.any(String), true);

@@ -61,7 +61,7 @@ describe('CreateCaseModal', () => {
       </TestProviders>
     );
 
-    wrapper.find('.euiModal__closeIcon').first().simulate('click');
+    wrapper.find('button.euiModal__closeIcon').first().simulate('click');
     expect(onCloseCaseModal).toBeCalled();
   });
 

@@ -421,13 +421,13 @@ describe('index table', () => {
     const rowIndex = 0;
     openMenuAndClickButton(rendered, rowIndex, 'forcemergeIndexMenuButton');
     snapshot(status(rendered, rowIndex));
-    expect(rendered.find('.euiModal').length).toBe(1);
+    expect(rendered.find('div.euiModal').length).toBe(1);
 
     let count = 0;
     store.subscribe(() => {
       if (count === 1) {
         snapshot(status(rendered, rowIndex));
-        expect(rendered.find('.euiModal').length).toBe(0);
+        expect(rendered.find('div.euiModal').length).toBe(0);
       }
       count++;
     });

@@ -10,6 +10,7 @@ import React from 'react';
 import { EuiFlexItem, EuiCard, EuiButton, EuiLink, EuiConfirmModal, EuiText } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { EXTERNAL_LINKS } from '../../../../../common/constants';
+import { i18n } from '@kbn/i18n';
 
 export class RevertToBasic extends React.PureComponent {
   cancel = () => {
@@ -29,12 +30,10 @@ export class RevertToBasic extends React.PureComponent {
     }
     return (
       <EuiConfirmModal
-        title={
-          <FormattedMessage
-            id="xpack.licenseMgmt.licenseDashboard.revertToBasic.confirmModalTitle"
-            defaultMessage="Confirm Revert to Basic License"
-          />
-        }
+        title={i18n.translate(
+          'xpack.licenseMgmt.licenseDashboard.revertToBasic.confirmModalTitle',
+          { defaultMessage: 'Confirm Revert to Basic License' }
+        )}
         onCancel={cancelStartBasicLicense}
         onConfirm={() => startBasicLicense(licenseType, true)}
         cancelButtonText={

@@ -102,7 +102,7 @@ export const ChangePasswordModal: FunctionComponent<ChangePasswordModalProps> =
   const isCurrentUser = currentUser?.username === username;
   const isSystemUser = username === 'kibana' || username === 'kibana_system';
 
-  const [form, eventHandlers] = useForm({
+  const [form, { onBlur, ...eventHandlers }] = useForm({
     onSubmit: async (values) => {
       try {
         await new UserAPIClient(services.http!).changePassword(
@@ -141,6 +141,13 @@ export const ChangePasswordModal: FunctionComponent<ChangePasswordModalProps> =
     defaultValues,
   });
 
+  // For some reason, the focus-lock dependency that EuiModal uses to accessibly trap focus
+  // is fighting the form `onBlur` and causing focus to be lost when clicking between password
+  // fields, so this workaround waits a tick before validating the form on blur
+  const validateFormOnBlur = (event: React.FocusEvent<HTMLFormElement & HTMLInputElement>) => {
+    requestAnimationFrame(() => onBlur(event));
+  };
+
   const firstFieldRef = useInitialFocus<HTMLInputElement>([isLoading]);
   const modalFormId = useGeneratedHtmlId({ prefix: 'modalForm' });
 
@@ -158,7 +165,13 @@ export const ChangePasswordModal: FunctionComponent<ChangePasswordModalProps> =
         {isLoading ? (
           <EuiLoadingContent />
         ) : (
-          <EuiForm id={modalFormId} component="form" noValidate {...eventHandlers}>
+          <EuiForm
+            id={modalFormId}
+            component="form"
+            noValidate
+            {...eventHandlers}
+            onBlur={validateFormOnBlur}
+          >
             {isSystemUser ? (
               <>
                 <EuiCallOut