Skip to content

Room list: fix keyboard navigation#32585

Merged
florianduros merged 8 commits intodevelopfrom
florianduros/navigation-room-list
Feb 23, 2026
Merged

Room list: fix keyboard navigation#32585
florianduros merged 8 commits intodevelopfrom
florianduros/navigation-room-list

Conversation

@florianduros
Copy link
Member

@florianduros florianduros commented Feb 19, 2026

Surprisingly, the keyboard navigation was broken on the room list....

Three issues:

  • When navigating down/up:
    • Focus is not moving, only selection
    • When the focused element is no longer visible (out of virtuoso viewport/scan), the element is unmounted due to the virtualisation
    • Navigation wasn't working anymore
  • Use padding bottom instead of margin bottom to avoid miscalculation from react virtuoso documentation
  • Waiting for the list to scroll to the new item (in scrollToIndex) and then select the items creates an unpleasant effect. The list scroll and after the selection moves.

Before

Screen.Recording.2026-02-19.at.17.36.50.mov

After

Screen.Recording.2026-02-20.at.10.59.31.mov

@florianduros florianduros force-pushed the florianduros/navigation-room-list branch from 01569f4 to 7f60e43 Compare February 19, 2026 17:28
@florianduros florianduros force-pushed the florianduros/navigation-room-list branch from 3a0e492 to ab62e93 Compare February 19, 2026 18:28
@florianduros florianduros force-pushed the florianduros/navigation-room-list branch from ab62e93 to 986bc00 Compare February 19, 2026 18:30
@florianduros florianduros force-pushed the florianduros/navigation-room-list branch from 986bc00 to 837f4b7 Compare February 20, 2026 10:07
@dbkr
Copy link
Member

dbkr commented Feb 23, 2026

The switch from margin to padding looks like it's putting the border in a slightly weird place according to the screenshot though.

@florianduros
Copy link
Member Author

The switch from margin to padding looks like it's putting the border in a slightly weird place according to the screenshot though.

The border is still aligned with the row content

Copy link
Member

@dbkr dbkr left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

OK - it looks like there's padding below the grey background but above in the screenshot though?

@florianduros florianduros added this pull request to the merge queue Feb 23, 2026
@github-merge-queue github-merge-queue bot removed this pull request from the merge queue due to no response for status checks Feb 23, 2026
@florianduros florianduros added this pull request to the merge queue Feb 23, 2026
Merged via the queue into develop with commit 6d870c3 Feb 23, 2026
39 checks passed
@florianduros florianduros deleted the florianduros/navigation-room-list branch February 23, 2026 16:48
alexlebens pushed a commit to alexlebens/infrastructure that referenced this pull request Mar 10, 2026
This PR contains the following updates:

| Package | Update | Change |
|---|---|---|
| [vectorim/element-web](https://github.com/element-hq/element-web) | patch | `v1.12.11` → `v1.12.12` |

---

### Release Notes

<details>
<summary>element-hq/element-web (vectorim/element-web)</summary>

### [`v1.12.12`](https://github.com/element-hq/element-web/releases/tag/v1.12.12)

[Compare Source](element-hq/element-web@v1.12.11...v1.12.12)

#### ✨ Features

- Add stable support for MSC4380 invite blocking ([#&#8203;31966](element-hq/element-web#31966)). Contributed by [@&#8203;richvdh](https://github.com/richvdh).
- Hide the names of banned users behind a spoiler tag ([#&#8203;32424](element-hq/element-web#32424)). Contributed by [@&#8203;andybalaam](https://github.com/andybalaam).
- Room list: remove bold effect on selected room ([#&#8203;32593](element-hq/element-web#32593)). Contributed by [@&#8203;florianduros](https://github.com/florianduros).
- Use Compound buttons in auth screens ([#&#8203;32562](element-hq/element-web#32562)). Contributed by [@&#8203;t3chguy](https://github.com/t3chguy).
- Track room list sorting algorithm changes ([#&#8203;32556](element-hq/element-web#32556)). Contributed by [@&#8203;MidhunSureshR](https://github.com/MidhunSureshR).
- Update `sso_redirect_options` to work for Native OIDC ([#&#8203;32537](element-hq/element-web#32537)). Contributed by [@&#8203;t3chguy](https://github.com/t3chguy).

#### 🐛 Bug Fixes

- Room list: avoid excessive re-renders on room list store update or filter change ([#&#8203;32663](element-hq/element-web#32663)). Contributed by [@&#8203;florianduros](https://github.com/florianduros).
- Room list: listen to call event to check number of participants ([#&#8203;32677](element-hq/element-web#32677)). Contributed by [@&#8203;florianduros](https://github.com/florianduros).
- Fix invite-specific join errors not being shown ([#&#8203;32621](element-hq/element-web#32621)). Contributed by [@&#8203;Half-Shot](https://github.com/Half-Shot).
- Prevent logging lots of "Browser unsupported" lines ([#&#8203;32647](element-hq/element-web#32647)). Contributed by [@&#8203;Half-Shot](https://github.com/Half-Shot).
- Update critical gradient for room status bar ([#&#8203;32575](element-hq/element-web#32575)). Contributed by [@&#8203;Half-Shot](https://github.com/Half-Shot).
- Room list: avoid header overflowing when too long ([#&#8203;32645](element-hq/element-web#32645)). Contributed by [@&#8203;florianduros](https://github.com/florianduros).
- Room list: center focus outline of room list item ([#&#8203;32637](element-hq/element-web#32637)). Contributed by [@&#8203;florianduros](https://github.com/florianduros).
- Fix misaligned cross in complete security dialog ([#&#8203;32614](element-hq/element-web#32614)). Contributed by [@&#8203;dbkr](https://github.com/dbkr).
- Room list: fix keyboard navigation ([#&#8203;32585](element-hq/element-web#32585)). Contributed by [@&#8203;florianduros](https://github.com/florianduros).
- Don't show empty privacy section ([#&#8203;32582](element-hq/element-web#32582)). Contributed by [@&#8203;dbkr](https://github.com/dbkr).
- Disable room list image dragging ([#&#8203;32590](element-hq/element-web#32590)). Contributed by [@&#8203;florianduros](https://github.com/florianduros).
- Update UserMenu theme toggle to use IconButton ([#&#8203;32591](element-hq/element-web#32591)). Contributed by [@&#8203;t3chguy](https://github.com/t3chguy).
- Room list: make room list item scales with large font size ([#&#8203;32523](element-hq/element-web#32523)). Contributed by [@&#8203;florianduros](https://github.com/florianduros).

</details>

---

### Configuration

📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 **Automerge**: Enabled.

♻ **Rebasing**: Whenever PR is behind base branch, or you tick the rebase/retry checkbox.

🔕 **Ignore**: Close this PR and you won't be reminded about this update again.

---

 - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box

---

This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).
<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiI0My41OS4yIiwidXBkYXRlZEluVmVyIjoiNDMuNTkuMiIsInRhcmdldEJyYW5jaCI6Im1haW4iLCJsYWJlbHMiOlsiYXV0b21lcmdlIiwiaW1hZ2UiXX0=-->

Reviewed-on: https://gitea.alexlebens.dev/alexlebens/infrastructure/pulls/4596
Co-authored-by: Renovate Bot <renovate-bot@alexlebens.net>
Co-committed-by: Renovate Bot <renovate-bot@alexlebens.net>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants