fix: Do not emit selection event when setting initial table value #2069…

… (#2082)

Co-authored-by: Martin Turoci <martin.turoci@h2o.ai>

ui/jest.config.js

@@ -27,6 +27,7 @@ module.exports = {
   modulePaths: [],
   moduleNameMapper: {
     "^react-native$": "react-native-web",
+    '^d3$': '<rootDir>/node_modules/d3/dist/d3.min.js',
     "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
   },
   moduleFileExtensions: [

ui/src/table.test.tsx

@@ -340,6 +340,27 @@ describe('Table.tsx', () => {
       expect(emitMock).toHaveBeenCalledTimes(1)
     })
 
+    it('Fires event - single selection with initial value', async () => {
+      const
+        props = { ...tableProps, single: true, events: ['select'], value: 'rowname2' },
+        { getAllByRole } = render(<XTable model={{ ...props }} />),
+        radioButtons = getAllByRole('radio')
+      fireEvent.click(radioButtons[0])
+      expect(emitMock).toHaveBeenCalledWith(tableProps.name, 'select', ['rowname1'])
+      expect(emitMock).toHaveBeenCalledTimes(1)
+    })
+
+    it('Fires event - multiple selection - select single with initial values', async () => {
+      const
+        values = ['rowname2', 'rowname3'],
+        props = { ...tableProps, multiple: true, events: ['select'], values },
+        { getAllByRole } = render(<XTable model={{ ...props }} />),
+        checkboxes = getAllByRole('checkbox')
+      fireEvent.click(checkboxes[1])
+      expect(emitMock).toHaveBeenCalledWith(tableProps.name, 'select', ['rowname1', ...values])
+      expect(emitMock).toHaveBeenCalledTimes(1)
+    })
+
     it('Clicks a column - link set on second col', () => {
       tableProps = {
         ...tableProps,

ui/src/table.tsx

@@ -709,6 +709,7 @@ export const
       [groupByKey, setGroupByKey] = React.useState('*'),
       contentRef = React.useRef<Fluent.IScrollablePane | null>(null),
       tableRef = React.useRef<{ resetSortIcons: () => void } | null>(null),
+      skipNextEventEmit = React.useRef<B>(false),
       groupByOptions: Fluent.IDropdownOption[] = React.useMemo(() =>
         groupable ? [{ key: '*', text: '(No Grouping)' }, ...m.columns.map(col => ({ key: col.name, text: col.label }))] : [], [m.columns, groupable]
       ),
@@ -913,7 +914,7 @@ export const
         onSelectionChanged: () => {
           const selectedItemKeys = selection.getSelection().map(item => item.key as S)
           wave.args[m.name] = selectedItemKeys
-          if (m.events?.includes('select')) wave.emit(m.name, 'select', selectedItemKeys)
+          if (!skipNextEventEmit.current && m.events?.includes('select')) wave.emit(m.name, 'select', selectedItemKeys)
         }
       }), [m.name, m.events]),
       computeHeight = () => {
@@ -955,11 +956,15 @@ export const
     React.useEffect(() => {
       wave.args[m.name] = []
       if (isSingle && m.value) {
+        skipNextEventEmit.current = true
         selection.setKeySelected(m.value, true, false)
+        skipNextEventEmit.current = false
         wave.args[m.name] = [m.value]
       }
       else if (isMultiple && m.values) {
+        skipNextEventEmit.current = true
         m.values.forEach(v => selection.setKeySelected(v, true, false))
+        skipNextEventEmit.current = false
         wave.args[m.name] = m.values
       }
       // eslint-disable-next-line react-hooks/exhaustive-deps