Skip to content

Commit

Permalink
web: fix early modal stack depletion (goauthentik#10068)
Browse files Browse the repository at this point in the history
* web: fix esbuild issue with style sheets

Getting ESBuild, Lit, and Storybook to all agree on how to read and parse stylesheets is a serious
pain. This fix better identifies the value types (instances) being passed from various sources in
the repo to the three *different* kinds of style processors we're using (the native one, the
polyfill one, and whatever the heck Storybook does internally).

Falling back to using older CSS instantiating techniques one era at a time seems to do the trick.
It's ugly, but in the face of the aggressive styling we use to avoid Flashes of Unstyled Content
(FLoUC), it's the logic with which we're left.

In standard mode, the following warning appears on the console when running a Flow:

```
Autofocus processing was blocked because a document already has a focused element.
```

In compatibility mode, the following **error** appears on the console when running a Flow:

```
crawler-inject.js:1106 Uncaught TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.
    at initDomMutationObservers (crawler-inject.js:1106:18)
    at crawler-inject.js:1114:24
    at Array.forEach (<anonymous>)
    at initDomMutationObservers (crawler-inject.js:1114:10)
    at crawler-inject.js:1549:1
initDomMutationObservers @ crawler-inject.js:1106
(anonymous) @ crawler-inject.js:1114
initDomMutationObservers @ crawler-inject.js:1114
(anonymous) @ crawler-inject.js:1549
```

Despite this error, nothing seems to be broken and flows work as anticipated.

* web: fix early modal stack depletion

While working on something else, I discovered this mutation inside
the modal stack handler; I've changed it to make a copy of the
original stack, modify that copy, and then write the changed stack
back to the original.  While unlikely, it is possible that the stack
could get out-of-sync and be depleted before all stacked modals
have been closed.  This fixes that issue.

* make eslint shut up

Signed-off-by: Jens Langhammer <[email protected]>

---------

Signed-off-by: Jens Langhammer <[email protected]>
Co-authored-by: Jens Langhammer <[email protected]>
  • Loading branch information
kensternberg-authentik and BeryJu authored Jun 17, 2024
1 parent 4df1b50 commit 57399c2
Showing 1 changed file with 8 additions and 5 deletions.
13 changes: 8 additions & 5 deletions web/src/elements/controllers/ModalOrchestrationController.ts
Original file line number Diff line number Diff line change
Expand Up @@ -94,22 +94,25 @@ export class ModalOrchestrationController implements ReactiveController {
}

removeTopmostModal() {
let checking = true;
while (checking) {
const modal = this.knownModals.pop();
const knownModals = [...this.knownModals];
// Pop off modals until you find the first live one, schedule it to be closed, and make that
// cleaned list the current state. Since this is our *only* state object, this has the
// effect of creating a new "knownModals" collection with some semantics.
// eslint-disable-next-line no-constant-condition
while (true) {
const modal = knownModals.pop();
if (!modal) {
break;
}
if (!modalIsLive(modal)) {
continue;
}

if (modal.closeModal() !== false) {
this.scheduleCleanup(modal);
}
checking = false;
break;
}
this.knownModals = knownModals;
}

@bound
Expand Down

0 comments on commit 57399c2

Please sign in to comment.