mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 10:21:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix(list-box-menu-item): scroll item into view when using keyboard navigation (#1471)

Browse source 
Fixes #1470
This commit is contained in:
metonym 2022-08-31 18:52:06 -07:00 • committed by GitHub
commit 7030300186
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 6 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/Dropdown/Dropdown.svelte
View file

@ -261,7 +261,7 @@
<ListBoxMenuItem
id="{item.id}"
active="{selectedId === item.id}"
highlighted="{highlightedIndex === i || selectedId === item.id}"
highlighted="{highlightedIndex === i}"
disabled="{item.disabled}"
on:click="{(e) => {
if (item.disabled) {

6
src/ListBox/ListBoxMenuItem.svelte
View file

@ -12,13 +12,17 @@
$: isTruncated = ref?.offsetWidth < ref?.scrollWidth;
$: title = isTruncated ? ref?.innerText : undefined;
$: if (highlighted && !ref?.matches(":hover")) {
// Scroll highlighted item into view if using keyboard navigation
ref.scrollIntoView({ block: "end" });
}
</script>
<div
role="option"
class:bx--list-box__menu-item="{true}"
class:bx--list-box__menu-item--active="{active}"
class:bx--list-box__menu-item--highlighted="{highlighted}"
class:bx--list-box__menu-item--highlighted="{highlighted || active}"
aria-selected="{active}"
disabled="{disabled ? true : undefined}"
{...$$restProps}