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 { ApplicationConfig, LOCALE_ID, isDevMode, provideBrowserGlobalErrorListeners } from '@angular/core';
|
||||||
import { provideRouter, withViewTransitions } from '@angular/router';
|
import { provideRouter, withViewTransitions } from '@angular/router';
|
||||||
|
import type { ActivatedRouteSnapshot } from '@angular/router';
|
||||||
import { provideHttpClient, withInterceptors } from '@angular/common/http';
|
import { provideHttpClient, withInterceptors } from '@angular/common/http';
|
||||||
import { registerLocaleData } from '@angular/common';
|
import { registerLocaleData } from '@angular/common';
|
||||||
import localeNl from '@angular/common/locales/nl';
|
import localeNl from '@angular/common/locales/nl';
|
||||||
@@ -16,7 +17,26 @@ registerLocaleData(localeNl);
|
|||||||
export const appConfig: ApplicationConfig = {
|
export const appConfig: ApplicationConfig = {
|
||||||
providers: [
|
providers: [
|
||||||
provideBrowserGlobalErrorListeners(),
|
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
|
// Dev-only: the ?scenario= toggle must never reach a production build, where
|
||||||
// a query param could otherwise force errors on the live app.
|
// a query param could otherwise force errors on the live app.
|
||||||
provideHttpClient(withInterceptors(isDevMode() ? [scenarioInterceptor, roleInterceptor] : [])),
|
provideHttpClient(withInterceptors(isDevMode() ? [scenarioInterceptor, roleInterceptor] : [])),
|
||||||
|
|||||||
Reference in New Issue
Block a user