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.

Sign up for GitHub

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

Jump to bottom

BTabs does not respond to key interactions #42

Closed
kikuomax opened this issue Aug 24, 2023 · 1 comment
Closed

BTabs does not respond to key interactions #42

kikuomax opened this issue Aug 24, 2023 · 1 comment
Labels
bug Something isn't working

Comments

@kikuomax
Copy link
Collaborator

kikuomax commented Aug 24, 2023 •
edited

Overview of the problem

Buefy version: buefy-next (67ecf3a)
Vuejs version: 3.3.4
OS/Browser: macOS/Safari

Description

<b-tabs> does not respond to arrow, space, and enter keys.

Steps to reproduce

<b-tabs>
    <b-tab-item label="A">
        A
    </b-tab-item>
    <b-tab-item label="B">
        B
    </b-tab-item>
    <b-tab-item label="C">
        C
    </b-tab-item>
</b-tabs>
  1. Click on one of tabs
  2. Press a left or right arrow key to focus on another tab
  3. Press a space or enter key to select the focused tab

Expected behavior

Tabs can be selected with key interactions.

Actual behavior

Tabs do not respond to key interactions.
@kikuomax kikuomax added the bug Something isn't working label Aug 24, 2023
@kikuomax
Copy link
Collaborator Author

This was caused by the breaking change around $refs that was introduced in Vue 2 → Vue 3 (before v3.2.25). The change was reverted in v3.2.25. My initial port was made for v3.0.11 and no longer works on v3.2.25 or later.

kikuomax added a commit to kikuomax/buefy that referenced this issue Aug 30, 2023
@kikuomax
fix(lib): Tabs not responding to keys
c64cc62 
- Fixes the bug that `BTabs` does not respond to key interactions. How
  `ref`s in `v-for` are stored in `$refs` mattered. Vue changed behavior
  twice from v2 through v3.3.4:
    - v2 → v3.0: `ref`s in `v-for` are stored as a single object in
      `$refs` (breaking change)
    - → v3.2.25: `ref`s in `v-for` are stored in an array in `$refs`
      (restored Vue 2 behavior)

  Since the last change to `BTabs` was made for Vue 3.0.11, it did not
  work with Vue v3.2.25 or later. This commit works with both behaviors.

issue ntohq#42
@kikuomax kikuomax mentioned this issue Aug 30, 2023
Merged
kikuomax added a commit that referenced this issue Aug 31, 2023
@kikuomax
fix(lib): Tabs not responding to keys (#50)
46caf86 
- Fixes the bug that `BTabs` does not respond to key interactions. How
  `ref`s in `v-for` are stored in `$refs` mattered. Vue changed behavior
  twice from v2 through v3.3.4:
    - v2 → v3.0: `ref`s in `v-for` are stored as a single object in
      `$refs` (breaking change)
    - → v3.2.25: `ref`s in `v-for` are stored in an array in `$refs`
      (restored Vue 2 behavior)

  Since the last change to `BTabs` was made for Vue 3.0.11, it did not
  work with Vue v3.2.25 or later. This commit works with both behaviors.

issue #42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@kikuomax