react - fix selection

Author: artem-kurchenko

React/src/App.tsx

@@ -4,7 +4,7 @@ import DataGrid, {
 } from 'devextreme-react/data-grid';
 import './App.css';
 import ArrayStore from 'devextreme/data/array_store';
-import { DataSource } from 'devextreme-react/common/data';
+import { DataSource, type DataSourceOptions } from 'devextreme-react/common/data';
 import service, { type City, type Employee } from './data';
 import MultipleDropDownBox from './components/MultipleDropDownBox';
 
@@ -20,13 +20,13 @@ const citiesStore = new ArrayStore({
   key: 'ID',
 });
 
-function getFilteredCities(cellInfo: DataGridTypes.ColumnEditCellTemplateData<Employee, number>, citiesStore: ArrayStore): DataSource {
-  return new DataSource({
+function getFilteredCities(cellInfo: DataGridTypes.ColumnEditCellTemplateData<Employee, number>, citiesStore: ArrayStore): DataSourceOptions {
+  return {
     store: citiesStore,
     filter: (data: City) => (cellInfo.data?.StateID && cellInfo.data?.StateID?.length > 0
       ? cellInfo.data?.StateID.includes(data.StateID)
       : true),
-  });
+  };
 }
 
 async function setStateValue(this: DataGridTypes.Column<Employee, number>, rowData: Employee, value: number[], currentRowData: Employee): Promise<void> {

React/src/components/MultipleDropDownBox.tsx

@@ -1,12 +1,12 @@
 import React, { useCallback, useMemo, useReducer } from 'react';
 import DataGrid, { Column, Selection, type DataGridTypes } from 'devextreme-react/data-grid';
 import DropDownBox from 'devextreme-react/drop-down-box';
-import type { ArrayStore, DataSource } from 'devextreme-react/common/data';
+import type { ArrayStore, DataSourceOptions } from 'devextreme-react/common/data';
 import DropDownBoxSave from './DropDownBoxSave';
 
 interface MultipleDropDownBoxProps {
   value: number[];
-  dataSource: DataSource | ArrayStore;
+  dataSource: DataSourceOptions | ArrayStore;
   // eslint-disable-next-line no-unused-vars
   setValue: (newValue: number[]) => void;
 }