fix(modal): no longer loses focus trap after clicking inside the component. (#6434)

**Related Issue:** #6281 

## Summary
This PR will fix `focusTrap` issue when user clicks inside the `modal`.
When user clicks inside the modal, `focusTrap` behavior wont be
affected.

Author: anveshmekala

src/components/modal/modal.e2e.ts

@@ -382,6 +382,46 @@ describe("calcite-modal accessibility checks", () => {
     expect(document.activeElement).toEqual($button1);
   });
 
+  it("traps focus within the modal when user clicks inside the modal", async () => {
+    const page = await newE2EPage();
+    await page.setContent(
+      html`
+        <calcite-modal aria-labelledby="modal-title" close-button-disabled open>
+          <div slot="header" id="modal-title">Modal title</div>
+          <div slot="content">
+            <p>Modal content.</p>
+            <calcite-button icon-start="plus" id="plus" round></calcite-button>
+          </div>
+          <calcite-button slot="back" color="neutral" width="full">Back</calcite-button>
+          <calcite-button slot="secondary" width="full" appearance="outline">Cancel</calcite-button>
+          <calcite-button slot="primary" width="full">Save</calcite-button>
+        </calcite-modal>
+      `
+    );
+
+    const contentEl = await page.find(`div[slot="content"]`);
+    const backButtonEl = await page.find(`calcite-button[slot="back"]`);
+
+    await page.keyboard.press("Tab");
+    expect(await page.evaluate(() => document.activeElement.id)).toBe("plus");
+
+    await page.keyboard.press("Tab");
+    expect(await page.evaluate(() => document.activeElement.slot)).toBe("back");
+
+    await page.keyboard.press("Tab");
+    expect(await page.evaluate(() => document.activeElement.slot)).toBe("secondary");
+
+    await page.keyboard.press("Tab");
+    expect(await page.evaluate(() => document.activeElement.slot)).toBe("primary");
+
+    await contentEl.click();
+    await page.waitForChanges();
+    await backButtonEl.click();
+    await page.waitForChanges();
+
+    expect(await page.evaluate(() => document.activeElement.slot)).toBe("back");
+  });
+
   describe("setFocus", () => {
     const createModalHTML = (contentHTML?: string, attrs?: string) =>
       `<calcite-modal open ${attrs}>${contentHTML}</calcite-modal>`;

src/components/popover/popover.e2e.ts

@@ -734,4 +734,48 @@ describe("calcite-popover", () => {
         shadowFocusTargetSelector: `.${CSS.closeButton}`
       }));
   });
+
+  it("should focus input element in the page with popover when user click", async () => {
+    // refer to https://github.com/Esri/calcite-components/issues/5993 for context
+    const page = await newE2EPage();
+    await page.setContent(html` <calcite-shell content-behind>
+        <calcite-shell-panel slot="panel-end">
+          <calcite-label>
+            value
+            <calcite-input-number value="0" min="0" max="10" id="shell-input"></calcite-input-number>
+          </calcite-label>
+          <calcite-button id="button">open popover</calcite-button>
+        </calcite-shell-panel>
+      </calcite-shell>
+
+      <calcite-popover reference-element="button">
+        <calcite-panel heading="popover panel header" closable="true" style="height: 400px">
+          <calcite-input-number value="5" min="0" max="10" id="popover-input"></calcite-input-number>
+        </calcite-panel>
+      </calcite-popover>`);
+
+    const popover = await page.find("calcite-popover");
+    expect(await popover.getProperty("open")).toBe(false);
+
+    const referenceElement = await page.find("calcite-button#button");
+    await referenceElement.click();
+    await page.waitForChanges();
+    expect(await popover.getProperty("open")).toBe(true);
+
+    const inputElInPopover = await page.find("calcite-input-number#popover-input");
+    await inputElInPopover.click();
+    expect(await page.evaluate(() => document.activeElement.id)).toBe("popover-input");
+
+    await page.keyboard.press("Backspace");
+    await page.keyboard.type("12345");
+    expect(await inputElInPopover.getProperty("value")).toBe("12345");
+
+    const inputElInShell = await page.find("calcite-input-number#shell-input");
+    await inputElInShell.click();
+    expect(await page.evaluate(() => document.activeElement.id)).toBe("shell-input");
+
+    await page.keyboard.press("Backspace");
+    await page.keyboard.type("12345");
+    expect(await inputElInShell.getProperty("value")).toBe("12345");
+  });
 });

src/utils/focusTrapComponent.ts

@@ -42,12 +42,15 @@ export function connectFocusTrap(component: FocusTrapComponent): void {
     return;
   }
 
-  if (focusTrapEl.tabIndex == null) {
-    focusTrapEl.tabIndex = -1;
+  if (!focusTrapEl.hasAttribute("tabindex")) {
+    focusTrapEl.setAttribute("tabindex", "-1");
   }
 
   const focusTrapOptions: FocusTrapOptions = {
-    clickOutsideDeactivates: true,
+    allowOutsideClick: true,
+    clickOutsideDeactivates: (event: MouseEvent | TouchEvent) => {
+      return !event.composedPath().find((el) => (el as HTMLElement) === focusTrapEl);
+    },
     document: focusTrapEl.ownerDocument,
     escapeDeactivates: false,
     fallbackFocus: focusTrapEl,