fix(wizard): don't animate silent ?aanvraag stamp — Firefox double-click on Next
The inschrijven/herregistratie wizards needed two clicks on "Volgende" to advance in Firefox (and Zen). Root cause: picking a field (e.g. correspondentie) triggers draft-sync's debounced create, which router.navigate()s to stamp ?aanvraag=<id> into the URL. withViewTransitions() animated that same-route navigation, and for the transition's duration Firefox's ::view-transition overlay swallows pointer events (confirmed: elementFromPoint over the button returns the overlay, not the button). Chrome sets pointer-events:none on the overlay so clicks pass through — hence Firefox-only. Fix: skip the view transition for same-route navigations (compare leaf routeConfig) so the silent id-stamp doesn't animate; genuine page-to-page transitions still fade. Verified in Firefox: page navs still animate (skipped:0), the ?aanvraag stamp is skipped, and Post → single Next advances step 1 → 2. GREEN + a11y. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
3740
documentation.json
3740
documentation.json
File diff suppressed because one or more lines are too long
@@ -1,5 +1,6 @@
|
||||
import { ApplicationConfig, LOCALE_ID, isDevMode, provideBrowserGlobalErrorListeners } from '@angular/core';
|
||||
import { provideRouter, withViewTransitions } from '@angular/router';
|
||||
import type { ActivatedRouteSnapshot } from '@angular/router';
|
||||
import { provideHttpClient, withInterceptors } from '@angular/common/http';
|
||||
import { registerLocaleData } from '@angular/common';
|
||||
import localeNl from '@angular/common/locales/nl';
|
||||
@@ -16,7 +17,26 @@ registerLocaleData(localeNl);
|
||||
export const appConfig: ApplicationConfig = {
|
||||
providers: [
|
||||
provideBrowserGlobalErrorListeners(),
|
||||
provideRouter(routes, withViewTransitions()),
|
||||
provideRouter(
|
||||
routes,
|
||||
// Cross-fade page-to-page navigations only. A silent same-route nav — e.g.
|
||||
// draft-sync stamping `?aanvraag=<id>` into the URL mid-wizard — must NOT
|
||||
// animate: for the transition's duration Firefox's `::view-transition`
|
||||
// overlay swallows pointer events (Chrome sets pointer-events:none, so it
|
||||
// doesn't), which loses a click landing on it and makes the wizard's "next"
|
||||
// button need a second click. Skip the transition when the route is unchanged.
|
||||
withViewTransitions({
|
||||
onViewTransitionCreated: ({ transition, from, to }) => {
|
||||
// `from`/`to` are the ROOT snapshots (the shared shell), so descend to the
|
||||
// leaf before comparing — otherwise every navigation looks "same route".
|
||||
const leaf = (r: ActivatedRouteSnapshot) => {
|
||||
while (r.firstChild) r = r.firstChild;
|
||||
return r;
|
||||
};
|
||||
if (leaf(from).routeConfig === leaf(to).routeConfig) transition.skipTransition();
|
||||
},
|
||||
}),
|
||||
),
|
||||
// Dev-only: the ?scenario= toggle must never reach a production build, where
|
||||
// a query param could otherwise force errors on the live app.
|
||||
provideHttpClient(withInterceptors(isDevMode() ? [scenarioInterceptor, roleInterceptor] : [])),
|
||||
|
||||
Reference in New Issue
Block a user