Disable auto-focus on confirmation modal children by default

Author: kraenhansen

packages/compass-components/src/hooks/use-confirmation.tsx

@@ -18,7 +18,10 @@ export { ConfirmationModalVariant };
 type ConfirmationModalProps = React.ComponentProps<typeof ConfirmationModal>;
 
 type ConfirmationProperties = Partial<
-  Pick<ConfirmationModalProps, 'title' | 'variant' | 'requiredInputText'>
+  Pick<
+    ConfirmationModalProps,
+    'title' | 'variant' | 'requiredInputText' | 'initialFocus'
+  >
 > & {
   buttonText?: React.ReactNode;
   confirmButtonProps?: Omit<ButtonProps, 'onClick'>;
@@ -188,6 +191,7 @@ const ConfirmationModalStateHandler: React.FunctionComponent = ({
           children: confirmationProps.buttonText ?? 'Confirm',
           onClick: handleConfirm,
           ...confirmationProps.confirmButtonProps,
+          'data-lgid': 'lg-confirmation_modal-footer-confirm_button',
         }}
         cancelButtonProps={{
           className: confirmationProps.hideCancelButton
@@ -196,6 +200,10 @@ const ConfirmationModalStateHandler: React.FunctionComponent = ({
           onClick: handleCancel,
         }}
         requiredInputText={confirmationProps.requiredInputText ?? undefined}
+        initialFocus={
+          confirmationProps.initialFocus ??
+          '[data-lgid=lg-confirmation_modal-footer-confirm_button]'
+        }
       >
         {confirmationProps.description}
         {confirmationProps.warning && (

packages/compass-components/src/hooks/use-error-details.tsx

@@ -25,7 +25,6 @@ export const showErrorDetails = function showErrorDetails({
     buttonText: closeAction.replace(/\b\w/g, (c) => c.toUpperCase()),
     confirmButtonProps: {
       variant: ButtonVariant.Default,
-      autoFocus: true,
     },
   });
 };

packages/compass-e2e-tests/tests/collection-aggregations-tab.test.ts

@@ -676,10 +676,6 @@ describe('Collection aggregations tab', function () {
       const errorDetailsJson = browser.$(Selectors.ErrorDetailsJson);
       await errorDetailsJson.waitForDisplayed();
 
-      // exit details
-      // leafygreen autofocus triggers a tooltip on the error code element,
-      // "Tab" to remove the focus
-      await browser.keys('Tab');
       // now click the close button
       await browser.clickVisible(Selectors.confirmationModalConfirmButton());
       // wait for the modal to go away

packages/compass-e2e-tests/tests/collection-documents-tab.test.ts

@@ -727,10 +727,6 @@ FindIterable<Document> result = collection.find(filter);`);
       const errorDetailsJson = browser.$(Selectors.ErrorDetailsJson);
       await errorDetailsJson.waitForDisplayed();
 
-      // exit details
-      // leafygreen autofocus triggers a tooltip on the error code element,
-      // "Tab" to remove the focus
-      await browser.keys('Tab');
       // now click the close button
       await browser.clickVisible(Selectors.confirmationModalConfirmButton());
       // wait for the modal to go away

packages/compass-e2e-tests/tests/collection-import.test.ts

@@ -595,9 +595,6 @@ describe('Collection import', function () {
       expect(await errorDetailsJson.getText()).to.include(
         'schemaRulesNotSatisfied'
       );
-      // leafygreen autofocus triggers a tooltip on the error code element,
-      // "Tab" to remove the focus
-      await browser.keys('Tab');
       // now click the close button
       await browser.clickVisible(Selectors.confirmationModalConfirmButton());
       // wait for the modal to go away