bugfix: territory pattern modal opening on page load (#1871)

The territory modal was opening on page load, this has it not open on
page load, but refresh the button on onUserMe().

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

regression is found:

evan

src/client/Main.ts

@@ -220,14 +220,7 @@ class Client {
     if (patternButton === null)
       throw new Error("territory-patterns-input-preview-button");
     territoryModal.previewButton = patternButton;
-    territoryModal.updatePreview();
-    territoryModal.resizeObserver = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        if (entry.target.classList.contains("preview-container")) {
-          territoryModal.buttonWidth = entry.contentRect.width;
-        }
-      }
-    });
+    territoryModal.refresh();
     patternButton.addEventListener("click", () => {
       territoryModal.open();
     });

src/client/TerritoryPatternsModal.ts

@@ -44,22 +44,6 @@ export class TerritoryPatternsModal extends LitElement {
     super();
   }
 
-  connectedCallback() {
-    super.connectedCallback();
-    window.addEventListener("keydown", this.handleKeyDown);
-    this.selectedPattern = this.userSettings.getSelectedPattern();
-    this.updateComplete.then(() => {
-      const containers = this.renderRoot.querySelectorAll(".preview-container");
-      if (this.resizeObserver) {
-        containers.forEach((container) =>
-          this.resizeObserver?.observe(container),
-        );
-      }
-      this.updatePreview();
-    });
-    this.open();
-  }
-
   disconnectedCallback() {
     window.removeEventListener("keydown", this.handleKeyDown);
     super.disconnectedCallback();
@@ -72,7 +56,7 @@ export class TerritoryPatternsModal extends LitElement {
     }
     this.patterns = await patterns(userMeResponse);
     this.me = userMeResponse;
-    this.requestUpdate();
+    this.refresh();
   }
 
   private readonly handleKeyDown = (e: KeyboardEvent) => {
@@ -249,7 +233,7 @@ export class TerritoryPatternsModal extends LitElement {
     this.modalEl?.open();
     window.addEventListener("keydown", this.handleKeyDown);
     this.isActive = true;
-    this.requestUpdate();
+    return this.refresh();
   }
 
   public close() {
@@ -262,7 +246,7 @@ export class TerritoryPatternsModal extends LitElement {
   private selectPattern(pattern: string | undefined) {
     this.userSettings.setSelectedPattern(pattern);
     this.selectedPattern = pattern;
-    this.updatePreview();
+    this.refresh();
     this.close();
   }
 
@@ -318,10 +302,22 @@ export class TerritoryPatternsModal extends LitElement {
     `;
   }
 
-  public updatePreview() {
-    if (this.previewButton === null) return;
+  public async refresh() {
     const preview = this.renderPatternPreview(this.selectedPattern, 48, 48);
+    this.requestUpdate();
+
+    // Wait for the DOM to be updated and the o-modal element to be available
+    await this.updateComplete;
+
+    // Now modalEl should be available
+    if (this.modalEl) {
+      this.modalEl.open();
+    } else {
+      console.warn("modalEl is still null after updateComplete");
+    }
+    if (this.previewButton === null) return;
     render(preview, this.previewButton);
+    this.requestUpdate();
   }
 
   private setLockedPatterns(lockedPatterns: string[], reason: string) {