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

Author: Theeraphat-Sorasetsakul

packages/elements/src/combo-box/index.ts

@@ -1300,16 +1300,12 @@ export class ComboBox<T extends DataItem = ItemData> extends FormFieldElement {
     return !!(this.clears && editable && (this.value || this.inputText || this.freeTextValue));
   }
 
-  private onclickInput () {
-    this.focus();
-  }
-
   /**
    * Returns a template for input field
    * @returns Input template
    */
   protected get inputTemplate(): TemplateResult {
-    return html`<div part="input-wrapper" @click="${this.onclickInput}">
+    return html`<div part="input-wrapper">
       ${this.renderInput()} ${this.selectionBadgeTemplate} ${this.clearButtonTemplate}
       <div id="toggle-button" part="button button-toggle">
         <ef-icon part="icon icon-toggle" icon="down"></ef-icon>

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

@@ -9,6 +9,10 @@ type OverlayClose = {
   closeCallback: CloseCallback;
 };
 
+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 +88,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();
     }
   };

packages/elements/src/text-field/index.ts

@@ -131,10 +131,6 @@ export class TextField extends FormFieldElement {
   protected override firstUpdated(changedProperties: PropertyValues): void {
     super.firstUpdated(changedProperties);
 
-    this.addEventListener('click', () => {
-      this.focus();
-    });
-
     registerOverflowTooltip(
       this,
       () => this.inputValue,