mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-18 19:46:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source 
Fixes #1470
This commit is contained in:
Eric Liu 2022-08-31 17:12:55 -07:00
commit e421ef6081
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}