🐞 - Routable dialog bug when it's navigate to another route

[emiryumak]

Playground Link

No response

Description

When a router is navigated through the dialog while the dialog is open, the close event immediately runs and routes to its parent. Therefore, an event is run as if the dialog is closed. If the route has changed, there is no need to change the route in close.

Angular version

17.0.7

Taiga UI version

3.63.0

Which browsers have you used?

• Chrome
• Firefox
• Safari
• Edge

Which operating systems have you used?

• macOS
• Windows
• Linux
• iOS
• Android

[emiryumak]

I took the code into my own project, edited it this way and fixed the bug. Maybe it will help

constructor(
	@Inject(ActivatedRoute) private readonly route: ActivatedRoute,
	@Inject(Router) private readonly router: Router,
	@Inject(TuiDialogService) dialogs: TuiDialogService,
	@Inject(Injector) injector: Injector,
	@Self() @Inject(TuiDestroyService) destroy$: TuiDestroyService
) {
	dialogs
		.open(
			new PolymorpheusComponent(this.route.snapshot.data['dialog'], injector),
			this.route.snapshot.data['dialogOptions']
		)
		.pipe(takeUntil(destroy$))
		.subscribe({
			complete: () => this.navigateToParent(),
		});
}

ngOnInit(): void {
	this.dialogUrl = this.router.url;
	this.parentUrl = this.getParentUrl();
}

private navigateToParent(): void {
	if (this.dialogUrl !== this.router.url) {
		return;
	}

	void this.router.navigate([this.parentUrl], {
		relativeTo: this.route,
		queryParamsHandling: 'preserve',
	});
}

private getParentUrl(): string {
	const isLazy = this.route.snapshot.data['isLazy'];

	const backUrl = isLazy ? this.getLazyLoadedBackUrl() : this.route.snapshot.data['backUrl'];

	return backUrl;
}

private getLazyLoadedBackUrl(): string {
	const urlSegments: UrlSegment[] = this.route.parent?.snapshot.url || [];

	return urlSegments.map(() => '..').join('/');
}

[Reactiver]

Thank you for your feedback about this bug! The code example helped to understand the incorrect behavior

Fix will be in this PR — #6885