diff --git a/ui/src/table.tsx b/ui/src/table.tsx index 91bfe482c2..40febc05b6 100644 --- a/ui/src/table.tsx +++ b/ui/src/table.tsx @@ -909,19 +909,16 @@ export const filter(null) search() }, [filter, initGroups, m.events, m.groups, m.name, m.pagination, search]), - getSelectedItems = React.useCallback(() => { - if (isSingle && m.value) return filteredItems.map(item => ({ ...item, selected: item.key === m.value })) - if (isMultiple && m.values) return filteredItems.map(item => ({ ...item, selected: m.values.includes(item.key as S) })) - return [] - }, [filteredItems, isMultiple, isSingle, m.value, m.values]), selection = React.useMemo(() => new Fluent.Selection({ onSelectionChanged: () => { const selectedItemKeys = selection.getSelection().map(item => item.key as S) + const args = wave.args[m.name] as S[] + if (isSingle && m.value === args[0] && m.value === selectedItemKeys[0]) return + if (isMultiple && m.values && m.values.every((item, idx) => item === selectedItemKeys[idx] && item === args[idx])) return wave.args[m.name] = selectedItemKeys if (m.events?.includes('select')) wave.emit(m.name, 'select', selectedItemKeys) - }, - items: getSelectedItems() - }), [getSelectedItems, m.name, m.events]), + } + }), [m.name, m.value, m.values, m.events, isSingle, isMultiple]), computeHeight = () => { if (m.height) return m.height if (items.length > 10) return 500 @@ -960,8 +957,14 @@ export const React.useEffect(() => { wave.args[m.name] = [] - if (isSingle && m.value) wave.args[m.name] = [m.value] - else if (isMultiple && m.values) wave.args[m.name] = m.values + if (isSingle && m.value) { + wave.args[m.name] = [m.value] + selection.setKeySelected(m.value, true, false) + } + else if (isMultiple && m.values) { + wave.args[m.name] = m.values + m.values.forEach(v => selection.setKeySelected(v, true, false)) + } // eslint-disable-next-line react-hooks/exhaustive-deps }, []) @@ -1053,4 +1056,4 @@ export const )} ) - } + } \ No newline at end of file