fix(overlay): fix to support filtor-dialog of efx-grid (#1293)

* feat(overlay): add zIndex type to include auto

* fix(overlay): change zIndex type from number to string

* Add click event to focus on text field

* Add click handler to input wrapper for focus

* Update zindex-manager.ts

* Refine zIndex property type definition

Updated zIndex property type to remove 'auto' option.

* fix(overlay): fix to support filtor-dialog of efx-grid

* Update close-manager.ts

Author: Theeraphat-Sorasetsakul

packages/elements/src/overlay/managers/close-manager.ts

@@ -9,6 +9,14 @@ type OverlayClose = {
   closeCallback: CloseCallback;
 };
 
+/**
+ * Check if an element is filter-dialog of efx-grid.
+ * @returns {boolean} true if the element is filter-dialog
+ */
+const isFilterDialog = (elements: EventTarget) => {
+  return elements instanceof HTMLElement && elements.tagName === 'FILTER-DIALOG';
+};
+
 /**
  * Close manager ensures that the correct (or the most top) overlay
  * is closed on ESC and click events
@@ -84,12 +92,14 @@ export class CloseManager {
     const path = event.composedPath();
     const focusBoundary = overlay.focusBoundary || overlay;
     const isOutsideClick = !path.includes(focusBoundary);
+    const isInPopup = path.find(isFilterDialog); // Ignore clicks inside filter-dialog of efx-grid
+    const shouldClose = isOutsideClick && !isInPopup;
 
-    if (isOutsideClick && !overlay.noInteractionLock) {
+    if (shouldClose && !overlay.noInteractionLock) {
       event.preventDefault();
     }
 
-    if (isOutsideClick && !overlay.noCancelOnOutsideClick) {
+    if (shouldClose && !overlay.noCancelOnOutsideClick) {
       closeCallback();
     }
   };