Skip to content

[Composite] Support RTL navigation, Home/End keys#825

Merged
mj12albert merged 12 commits intomui:masterfrom
mj12albert:feat/composite-rtl
Nov 19, 2024
Merged

[Composite] Support RTL navigation, Home/End keys#825
mj12albert merged 12 commits intomui:masterfrom
mj12albert:feat/composite-rtl

Conversation

@mj12albert
Copy link
Copy Markdown
Member

@mj12albert mj12albert commented Nov 15, 2024

Split from #763 to unblock #751
Closes #824

  • Adds support for RTL navigation with arrow keys by detecting the CSS direction property that could be inherited from the HTML dir attribute
  • Adds support for navigating to the first/last items with Home/End keys, enable-able with the enableHomeAndEndKeys prop

@mui-bot
Copy link
Copy Markdown

mui-bot commented Nov 15, 2024

Netlify deploy preview

https://deploy-preview-825--base-ui.netlify.app/

Generated by 🚫 dangerJS against c65d478

Comment on lines -181 to -184
// Wait for FocusManager `returnFocus` to execute.
queueMicrotask(() => {
elementsRef.current[nextIndex]?.focus();
});
Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

The test breaks but it still works in the browser, I've separated this for now

@mj12albert mj12albert changed the title [Composite] Support RTL [Composite] Support RTL navigation Nov 15, 2024
@mj12albert mj12albert marked this pull request as ready for review November 18, 2024 07:50
@mj12albert mj12albert changed the title [Composite] Support RTL navigation [Composite] Support RTL navigation, Home/End keys Nov 18, 2024
@mj12albert mj12albert force-pushed the feat/composite-rtl branch 7 times, most recently from 25940ee to 7f7132b Compare November 18, 2024 09:20
Comment on lines +175 to +185
const toEndKeys = isRtl
? {
horizontal: [ARROW_LEFT],
vertical: [ARROW_DOWN],
both: [ARROW_LEFT, ARROW_DOWN],
}[orientation]
: {
horizontal: [ARROW_RIGHT],
vertical: [ARROW_DOWN],
both: [ARROW_RIGHT, ARROW_DOWN],
}[orientation];
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

This could be a bit simpler by assigning const horizontalEndKey = isRtl ? ARROW_LEFT ? ARROW_RIGHT and same for start

@mj12albert mj12albert merged commit d7089ab into mui:master Nov 19, 2024
@mj12albert mj12albert deleted the feat/composite-rtl branch November 19, 2024 08:18
@oliviertassinari oliviertassinari added internal Behind-the-scenes enhancement. Formerly called “core”. and removed core labels Aug 2, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

internal Behind-the-scenes enhancement. Formerly called “core”.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Composite] Support navigating to the first/last items with the Home/End keys

4 participants