Merge pull request #2343 from infor-design/2246-ids-data-grid-popup-a…

…lignment

2246 - ids-data-grid popup alignment

doc/CHANGELOG.md

@@ -20,6 +20,7 @@
 - `[Datagrid]` Added the ability to create multiline header text [see docs](https://github.com/infor-design/enterprise-wc/tree/main/src/components/ids-data-grid#multiline-header-code-examples) for details. ([#1793](https://github.com/infor-design/enterprise-wc/issues/1793))
 - `[Datagrid]` Fix problem with datagrid pagination where setting the `pageTotal` property causes some of the rows to be incorrectly sorted. ([#2232](https://github.com/infor-design/enterprise-wc/issues/2232))
 - `[Datagrid]` Fixed bugged where adding `pageTotal` to datagrid messed up data order. ([#2232](https://github.com/infor-design/enterprise-wc/issues/2232))
+- `[Datagrid]` Fix grid popup alignment issues, by removing children if there are more than one instance of the child. ([#2246](https://github.com/infor-design/enterprise-wc/issues/2246))
 - `[Splitter]` If the panel is resized to 0, it will have `collapsed` attribute, enabling it to expand to its original position. ([#2083](https://github.com/infor-design/enterprise-wc/issues/2083))
 
 ### 1.1.0 Fixes

src/components/ids-data-grid/ids-data-grid-filters.ts

@@ -760,7 +760,7 @@ export default class IdsDataGridFilters {
       let triggerField = node?.querySelector('ids-trigger-field');
       const datePickerPopup = node?.querySelector('ids-date-picker-popup');
       const timePickerPopup = node?.querySelector('ids-time-picker-popup');
-      let menuAttachment = '.ids-data-grid';
+      let menuAttachment = '.ids-data-grid-wrapper';
 
       // Slotted filter only
       if (slot && (input || dropdown || datePicker || timePicker || btn)) {

src/mixins/ids-attachment-mixin/ids-attachment-mixin.ts

@@ -78,6 +78,19 @@ const IdsAttachmentMixin = <T extends IdsBaseConstructor>(superclass: T) => clas
    */
   appendToTargetParent(): void {
     if (!this.attachmentParentElement) return;
+
+    if (this.id) {
+      /**
+       * Remove Child if there are more than one instance of the component
+       */
+      const [first, ...others] = this.attachmentParentElement.querySelectorAll(`#${this.id}`);
+      if (first && others.length) {
+        others.forEach((elem) => {
+          elem.remove();
+        });
+      }
+    }
+
     this.attachmentParentElement.append(this);
   }