Causes UI to stop responding to state changes

[KTPenrose]

I have a MaterialTable that is bound to a state variable that contains an array. It works beautifully, until I make the container dialog draggable.

... const [attachments, setAttachments] = useState([]); ... const onOkAttachmentHandler = (file) => { //add attachment if (file !== null) { let attachment = { ownerId: props.entityId, labId: props.labId, filename: file.name, file: file, archive: false }; setAttachments((previousAttachments) => { let newList = [...previousAttachments, attachment]; return newList; }); props.attachmentAdded(attachment); } setAddAttachmentDialogVisible(false); } ... <MaterialTable title="Attachments" data={attachments} ...

[JEKO10]

The issue you're facing is likely due to the MaterialTable losing its event listeners or being rendered incorrectly when the container dialog becomes draggable.

The first solution that comes to my mind is that you can re-render MaterialTable on Dialog Open/Close:

1. Add a state variable to track the visibility of the draggable dialog.
2. Update that state to also trigger a re-render of the MaterialTable component.

The second solution is to use a Portal for the MaterialTable

1. Import and wrap the MaterialTable component with the Portal component.

Be careful with the first solution because you don't want to cause unnecessary re-renders if the dialog content changes frequently.

Let me know if you have more question :)