Skip to content

modal message boxes and input auto focus do not work well together when switching pages #2415

@tbl0605

Description

@tbl0605

Describe the bug

Hi,
this bug is a follow-up to conversation #2401 with @xvaara, there is still an issue where await new Promise((r) => window.setTimeout(r, 60)); is needed after the modal message box is closed.
For example, when using a modal message box just before leaving a page (using vue-router), autofocus on the next page will not work (without hacks). I have other cases where focus fields don't work after closing a modal message box, but I think it's the same issue.

Reproduction

  • Go to https://stackblitz.com/edit/sb1-jjchwv
  • Click on the "Go to Page Two (autofocus OK)" button, the "Page Two" appears and input auto focus works as expected
  • Click on the "Go to Page One (with confirmation and delay - autofocus OK)" button, a modal message box appears, click on button "OK", the "Page One" appears and input auto focus works as expected, because await new Promise((r) => window.setTimeout(r, 60)); is called before switching page
  • Click on the "Go to Page Two (with confirmation and no delay - autofocus KO)" button, a modal message box appears, click on button "OK", the "Page Two" appears and input auto focus doesn't work, because there was no delay before switching page

Reproduction

https://stackblitz.com/edit/sb1-jjchwv

Used Package Manager

pnpm

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions