Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(ktreelist): fix multiple emits #2334

Merged
merged 5 commits into from
Aug 13, 2024
+15 −4
Merged

fix(ktreelist): fix multiple emits #2334

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8564535
fix(ktreelist): fix multiple emits
portikM Aug 12, 2024
f371b3e
Merge branch 'main' into fix/ktreelist-multiple-emits
portikM Aug 13, 2024
4e8194e
fix(ktreelist): fix multi emit [KHCP-12985]
portikM Aug 13, 2024
ba01522
docs(radio): typo
portikM Aug 13, 2024
0201030
fix(ktreelist): fix drag behaviour
portikM Aug 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions src/components/KSlideout/KSlideout.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,6 +181,7 @@ onUnmounted(() => {
padding-right: var(--kui-space-70, $kui-space-70);

.slideout-title {
align-items: center;
display: flex;
flex: 1;
font-family: var(--kui-font-family-text, $kui-font-family-text);
Expand Down Expand Up @@ -224,6 +225,10 @@ onUnmounted(() => {
:deep(> *:last-child) {
padding-bottom: var(--kui-space-70, $kui-space-70); // add padding to the last child to add some spacing before bottom of the page
}

:deep(> p) {
margin: var(--kui-space-0, $kui-space-0);
}
}
}

Expand Down
12 changes: 11 additions & 1 deletion src/components/KTreeList/KTreeList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,14 @@ const emit = defineEmits<{
(event: 'selected', item: TreeListItem): void
}>()

const { useDebounce } = useUtilities()

// use debounce function to avoid emitting multiple same events at once
// even a 1ms debounce will do the trick
const { debouncedFn: debouncedEmit } = useDebounce((item: TreeListItem) => {
emit('selected', item)
}, 1)
portikM marked this conversation as resolved.
Show resolved Hide resolved

const internalList = ref<TreeListItem[]>([])

// we need this so we can create a watcher for programmatic changes to the modelValue
Expand Down Expand Up @@ -145,7 +153,8 @@ const handleSelection = (itemToSelect: TreeListItem, list?: TreeListItem[]): voi
handleSelection(itemToSelect, item.children)
}
})
emit('selected', itemToSelect)

debouncedEmit(itemToSelect)
}

const handleChangeEvent = (data: ChangeEvent): void => {
Expand Down Expand Up @@ -207,6 +216,7 @@ onMounted(() => {
// needs to stay unscoped as it's targeting specific deeply nested elements
.k-tree-list {
font-family: var(--kui-font-family-text, $kui-font-family-text);
width: 100%;

& > .tree-draggable > .tree-item-container {
&:before {
Expand Down