Columns Sort Bug -> insertBefore Error

[igor-adzz]

What you were expecting:
After upgrading to react admin 4.15.0, I'm trying to sort columns in datagrid via the Column button.

What happened instead:
Instead, when the sorted element hits any other one, I get an error message. The method that throws the error was added to ra-ui-materialui in version 4.14.6 (closest() instead of parentNode). Now list is null and dropItem is null too.

if (list === dropItem.parentNode.closest('ul')) {  // null === null
    dropIndex.current = dropItem.dataset.index;
    if (dropItem === selectedItem.nextSibling) {
        dropItem = dropItem.nextSibling;
    }
    list.insertBefore(selectedItem, dropItem);  // null.insertBefore
}

Steps to reproduce:

• Create a List and add a DatagridConfigurable
• Try to move the column to another place

• React-admin version: 4.15.0
• Last version that did not exhibit the issue (if applicable): 4.14.0
• React version: 18.2.0
• Browser: Google Chrome
• Stack trace (in case of a JS error):

Uncaught TypeError: Cannot read properties of null (reading 'insertBefore')
    at handleDrag (FieldToggle.tsx:50:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4291:1)
    at executeDispatch (react-dom.development.js:9041:1)
    at processDispatchQueueItemsInOrder (react-dom.development.js:9073:1)
    at processDispatchQueue (react-dom.development.js:9086:1)
    at dispatchEventsForPlugins (react-dom.development.js:9097:1)
    at react-dom.development.js:9288:1
react-dom.development.js:4312 Uncaught TypeError: Cannot read properties of null (reading 'insertBefore')
    at handleDrag (FieldToggle.tsx:50:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4291:1)
    at executeDispatch (react-dom.development.js:9041:1)
    at processDispatchQueueItemsInOrder (react-dom.development.js:9073:1)
    at processDispatchQueue (react-dom.development.js:9086:1)
    at dispatchEventsForPlugins (react-dom.development.js:9097:1)
    at react-dom.development.js:9288:1
FieldToggle.tsx:63 Uncaught TypeError: Cannot read properties of null (reading 'getBoundingClientRect')
    at handleDragEnd (FieldToggle.tsx:63:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4291:1)
    at executeDispatch (react-dom.development.js:9041:1)
    at processDispatchQueueItemsInOrder (react-dom.development.js:9073:1)
    at processDispatchQueue (react-dom.development.js:9086:1)
    at dispatchEventsForPlugins (react-dom.development.js:9097:1)
    at react-dom.development.js:9288:1
react-dom.development.js:4312 Uncaught TypeError: Cannot read properties of null (reading 'getBoundingClientRect')
    at handleDragEnd (FieldToggle.tsx:63:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4291:1)
    at executeDispatch (react-dom.development.js:9041:1)
    at processDispatchQueueItemsInOrder (react-dom.development.js:9073:1)
    at processDispatchQueue (react-dom.development.js:9086:1)
    at dispatchEventsForPlugins (react-dom.development.js:9097:1)
    at react-dom.development.js:9288:1

[djhi]

Thanks for reporting this. Please provide a sample application showing the issue by forking the following Stackblitz (https://stackblitz.com/github/marmelab/react-admin/tree/master/examples/simple).

[igor-adzz]

@djhi
A link: https://stackblitz.com/edit/github-xknwec?file=src%2Fposts%2FPostList.tsx

I should also note that if you use a simple Datagrid, the columns are not displayed inside Columns at all.

[slax57]

Reproduced, thanks for the report!

[slax57]

Btw

I should also note that if you use a simple Datagrid, the columns are not displayed inside Columns at all.

This is expected. The <SelectColumnsButton> must be used in conjunction with <DatagridConfigurable>.

[slax57]

Okay found it, actually the DatagridEditor works fine but we forgot to add component="ul" to the <Box> in <SelectColumnsButton>. PR incoming.