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

Actions menu autofocus on elements doesn't work initially #1760

Closed
PVince81 opened this issue Mar 12, 2021 · 1 comment · Fixed by #1761
Closed

Actions menu autofocus on elements doesn't work initially #1760

PVince81 opened this issue Mar 12, 2021 · 1 comment · Fixed by #1761
Assignees
Labels
1. to develop Accepted and waiting to be taken care of

Comments

@PVince81
Copy link
Contributor

Steps

  1. Tested in the Talk app
  2. Focus on the new message form
  3. Use shift+tab to tab up to the three dots menu.
  4. Hit enter, then try to move up and down with the keyboard.

Expected result

Able to move up/down

Actual result

The item is not focussed.
Querying document.activeElement shows that the focus is still on the trigger.

Opening the menu a second time makes the issue disappear.

This is because the first render of the popover doesn't become visible directly and has an arbitrary delay defined by requestAnimationFrame, see my upstream report for details: Akryum/floating-vue#661

Workaround

Depending whether upstream will accept a PR that emits a new event or not, there are other possible workarounds:

  1. Extend our Popover component to monitor the DOM periodically in the @show handler, and only once the .open class appears, trigger another event like afterShow. Only do so if there's a handler set there.
  2. Like 1 but do the periodic monitoring in the Actions class
  3. Like 2 but simply retry focussing the first element if it failed

So far I prefer approach 1 as a temporary workaround until v-tooltip is fixed upstream.

@PVince81 PVince81 added the 1. to develop Accepted and waiting to be taken care of label Mar 12, 2021
@PVince81 PVince81 self-assigned this Mar 12, 2021
@PVince81
Copy link
Contributor Author

no need to monitor the DOM, I managed to make it work by watching this.$refs.popover.isOpen

PR here: #1761

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
1. to develop Accepted and waiting to be taken care of
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant