From 0a8eff943c1161284351bd3dd1f839ae681e2aae Mon Sep 17 00:00:00 2001
From: Tim McConechy <tim.mcconechy@infor.com>
Date: Fri, 30 Aug 2024 12:18:17 -0400
Subject: [PATCH] Hide popup when initially loaded

---
 doc/CHANGELOG.md                        | 3 ++-
 src/components/ids-popup/ids-popup.scss | 5 +++++
 src/components/ids-popup/ids-popup.ts   | 2 ++
 3 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/doc/CHANGELOG.md b/doc/CHANGELOG.md
index 66113cba42..b819ecb2ea 100644
--- a/doc/CHANGELOG.md
+++ b/doc/CHANGELOG.md
@@ -14,7 +14,7 @@
 
 ### 1.4.3 Fixes
 
-- `[ColorPicker]` Fixed bug where custom colors were being overidden. ([#8964](https://github.com/infor-design/enterprise/issues/8964))
+- `[ColorPicker]` Fixed bug where custom colors were being overridden. ([#8964](https://github.com/infor-design/enterprise/issues/8964))
 - `[Datagrid]` Fixed bug where the custom select-color is lost during row-recycling/virtual-scrolling. ([#1392](https://github.com/infor-design/enterprise-wc/issues/1392))
 - `[Datagrid]` Fixed bug editor dropdown can't be re-opened after closing. ([#2589](https://github.com/infor-design/enterprise-wc/issues/2589))
 - `[Dropdown]` Made the `typeahead` setting true by default. ([#2770](https://github.com/infor-design/enterprise-wc/issues/2770))
@@ -26,6 +26,7 @@
 - `[Listbuilder]` Fixed buggy builder styles. ([#2701]https://github.com/infor-design/enterprise-wc/issues/2701)
 - `[Listbuilder]` Fixed an issue where clicking the row in the wrong spot would edit the wrong row. ([#2701]https://github.com/infor-design/enterprise-wc/issues/2701)
 - `[Multiselect]` Converted multiselect tests to playwright. ([#1957](https://github.com/infor-design/enterprise-wc/issues/1957))
+- `[Popup]` Fixed an issue where the popup took up space when initially loaded. ([#2777](https://github.com/infor-design/enterprise-wc/issues/2777))
 - `[Pager]` Fixed an issue where the disabled attribute of navigation buttons was overridden by the pager. ([#2738](https://github.com/infor-design/enterprise-wc/issues/2738))
 - `[Radio]` Fixed an issue where the radio group could not set checked for radio elements when using Angular's FormControl and value binding. ([#2700](https://github.com/infor-design/enterprise-wc/issues/2700))
 - `[Splitter]` Converted datagrid popups to fixed to go over splitter panes. ([#2499](https://github.com/infor-design/enterprise-wc/issues/2499))
diff --git a/src/components/ids-popup/ids-popup.scss b/src/components/ids-popup/ids-popup.scss
index aa1fddf206..49094de5aa 100644
--- a/src/components/ids-popup/ids-popup.scss
+++ b/src/components/ids-popup/ids-popup.scss
@@ -30,6 +30,11 @@
 // from occuring inside the "invisible" Popup
 :host(:not([visible])) {
   pointer-events: none;
+   display: none;
+}
+
+:host([visible]) {
+  display: block;
 }
 
 // Visible, animated host elements receive left/top animations
diff --git a/src/components/ids-popup/ids-popup.ts b/src/components/ids-popup/ids-popup.ts
index c3b16c6d93..76f2307c74 100644
--- a/src/components/ids-popup/ids-popup.ts
+++ b/src/components/ids-popup/ids-popup.ts
@@ -1022,8 +1022,10 @@ export default class IdsPopup extends Base {
       this.#visible = trueVal;
       if (trueVal) {
         this.setAttribute(attributes.VISIBLE, '');
+        this.addOpenEvents();
       } else {
         this.removeAttribute(attributes.VISIBLE);
+        this.removeOpenEvents();
       }
       // eslint-disable-next-line @typescript-eslint/no-floating-promises
       this.refreshVisibility();