Hello,

Our team is using MobX-State-Tree (MST) and KendoReact TreeList control with virtual scrolling enabled. According to documentation MST model stores data as an observable array (https://mobx-state-tree.js.org/API/#array and https://mobx.js.org/api.html#observablearray).

The MST model’s field ‘tree’ is not a regular array, but a LegacyObservableArray.

From UI standpoint: 

• initially all tree nodes are collapsed

• user clicks on i.e. 3rd tree node

• selection is not displayed on any tree node (3rd node expected to be selected)

• user expands 1st tree node - selection is set on the 3rd tree node

The following warning appears in the browser console. 

Warning: Failed prop type: Invalid prop `data` of type `object` supplied to `TreeList`, expected `array`.

    in TreeList (created by wrappedComponent)

    in wrappedComponent (created by wrappedComponent)

    in div (created by wrappedComponent)

    in div (created by wrappedComponent)

    in wrappedComponent

Model is defined as:

const TreeViewModel = types

    .model('TreeViewModel', {

        selectedItemUUID: types.maybe(types.string),

        tree: types.optional(types.array(TreeNodeModel), []),

        isLoaded: types.maybe(types.optional(types.boolean, false)),

        treeTypes: types.optional(types.array(TreeNodeTypeModel), []),

    })

    .views((self) => ({

        get treeCollection(): any {      

            return self.tree;

        },

    }))

Component is defined as:

        return (<>

            {!viewModel.isLoaded && loadingPanel}

            <div className='treeListContainer' ref={stageCanvasRef}>

                {treeListContainerHeight && <TreeList

                    style={{ maxHeight: `${treeListContainerHeight}px`, overflow: 'auto', }}

                    data={viewModel.treeCollection}

                    expandField={expandField}

                    subItemsField={subItemsField}

                    columns={columns}

                    selectedField={selectedField}

                    rowHeight={40}

                    scrollable="virtual"

                />}

            </div>

        </>);

The following workaround allows converting an observable array to a regular array.

    .views((self) => ({

        get treeCollection(): any {      

            return JSON.parse(JSON.stringify(self.tree));    // or self.tree.slice()

        },

    }))

This solution affects performance due to array copy. 

Besides this TreeList uses an array copy. User’s selection and expanding don’t trigger related changes in the initial observable array in the model.

Related event handlers (i.e. onSelectionChange, onExpandChange) should be extended to make appropriate changes in the MST model.

Can you please extend KendoReact controls to support observable arrays?

Is there a better solution?