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'>;
@@ -196,6 +199,7 @@ const ConfirmationModalStateHandler: React.FunctionComponent = ({
           onClick: handleCancel,
         }}
         requiredInputText={confirmationProps.requiredInputText ?? undefined}
+        initialFocus={confirmationProps.initialFocus ?? null}
       >
         {confirmationProps.description}
         {confirmationProps.warning && (

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