Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to close dialog on browser back navigation #66

Open
snowfrogdev opened this issue Jun 15, 2022 · 4 comments
Open

How to close dialog on browser back navigation #66

snowfrogdev opened this issue Jun 15, 2022 · 4 comments
Labels
enhancement New feature or request

Comments

@snowfrogdev
Copy link

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[x] Feature request
[ ] Documentation issue or request
[x] Support request
[ ] Other... Please describe:

Current behavior

When a dialog is opened and the user clicks the browser back button, the dialog doesn't close.

Expected behavior

For the dialog to close when the browser back button is clicked.

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Just doesn't feel right to have navigation happen behind the dialog.

Environment


Angular version: 13


Browser:
- [x] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

@NetanelBasal
Copy link
Member

Close it on component destroy

@snowfrogdev
Copy link
Author

snowfrogdev commented Jun 15, 2022

Right. That will indeed close the dialog. But it doesn't stop navigation. What I would like is for hitting the back button in the browser to correspond to closing the dialog and nothing else. This is especially important for dialog that are very big and basically act like a page in front of another page. The user's expectation with those is to find themselves back where they opened the dialog if they hit the back button.

I have found a way to do it, but I think it would be great if this was built-in to your library as a dialog instance option. Here is my solution:

const closedModalRefs = new Set<string>();

@Component({
  selector: 'in-listing-preview',
  templateUrl: './listing-preview.component.html',
})
export class ListingPreviewComponent implements OnInit {
  listingDetails?: ListingDetails;

  constructor(public ref: DialogRef<ListingDetails>, private location: LocationStrategy, private router: Router) {}

  ngOnInit(): void {
    this.listingDetails = this.ref.data;

    this.location.pushState('ListingPreviewModal', 'ListingPreviewModal', this.router.url, '');
    this.location.onPopState(() => {
      if (closedModalRefs.has(this.ref.id)) return;
      closedModalRefs.add(this.ref.id);
      this.ref.close();
    });
  }
}

As you can see, if forces my Dialog Component to depend on LocationStrategy and Router, which is kind of weird and a concern that you wouldn't normally want to deal with at this level of abstraction. Having that mechanism built-in to your lib and exposed through instance config would be nice.

If you think it would be a good idea and you accept PRs, I'm willing to take a crack at it.

@NetanelBasal
Copy link
Member

You are welcome to submit a PR

@NetanelBasal NetanelBasal added the enhancement New feature or request label Dec 21, 2022
@thewebchameleon
Copy link

My workaround:

export class AppComponent {

  constructor(
    private router: Router,
    private readonly dialogService: DialogService,
  ) { }

  ngOnInit(): void {
    this.router.events.subscribe((event: any) => {
      if (event instanceof NavigationEnd) {
        this.dialogService.closeAll();
      }
    });
  }

}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

3 participants