Store picker had one good open in it, then tripped over its own names

Flow

Loading a page with a script into a pop-up

1. 1Know where it runs⌄

   Loaded scripts run in the host page, again on every open.

2. 2Wrap the script⌄

   A function or module script keeps its names private.

3. 3Keep listeners local⌄

   Attach to the loaded content, not the whole page.

4. 4Share one opener⌄

   Use it when present, navigate normally when not.

5. 5Test twice⌄

   One open always passes; the second is the real check.

The store picker the agent built for my admin dashboard worked the first time you opened it. The second time, in the same page, its script would run into names it had made the first time.

The dashboard has cards for things like users, settings and backups. Most of those screens are for one store, so the agent added a picker: click Open on a card, a small page loads into a pop-up window, you pick a store, and the window moves on to that store's screen.

Where the picker's code runs

The dashboard loads the picker's page and puts its content into the pop-up. The part that runs the picker's script isn't in these commits, but I suspect the dashboard runs each script itself. Those scripts would run in the dashboard's page, not in a page of their own, and again every time the pop-up opens. Closing the pop-up doesn't clear names a script made at the top level.

Why a second open goes dead

The first picker's script began with three constants, like the company and which screen to open next. Top-level constants in a normal script all share one space across the page, and the browser won't let the same name be made twice there. So on the second open, the browser throws the whole script out before it starts. The store list still shows, because that's plain page content. The buttons just never get told what to do.

That's what my guess and the browser rules predict. I don't have a record of it happening. What I have is another version of the same change, which wraps the picker's script in a function and says it's there to stop the names being declared twice.

One wrapper around the script

(() => {
  const branch = "north";
  wireRows(branch);
})();

Now each open gets its own names, and they're gone when the function ends.

The wrapper doesn't cover everything, so if you load pages with scripts into a pop-up:

• Wrap each loaded page's script like this, or have the dashboard do it for every page, so nobody has to remember.
• Don't attach listeners to the whole page from a loaded page. They pile up with every open.
• Open every pop-up twice when you test it. One open always passes.

The same change made only the Open button clickable, not the whole card. The dashboard also shares one "open in the pop-up" function, and the picker uses it when it's there and goes to the page normally when it isn't.