mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11: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 <ListBoxMenuItem
id="{item.id}" id="{item.id}"
active="{selectedId === item.id}" active="{selectedId === item.id}"
highlighted="{highlightedIndex === i || selectedId === item.id}" highlighted="{highlightedIndex === i}"
disabled="{item.disabled}" disabled="{item.disabled}"
on:click="{(e) => { on:click="{(e) => {
if (item.disabled) { if (item.disabled) {

6
src/ListBox/ListBoxMenuItem.svelte
View file

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