[data grid] Problems with copy/paste and the autocomplete dropdown

[mahammahmood]

The problem in depth

I want the dropdown to remain open while I'm selecting checkboxes when editing a cell, but it closes after a single selection. Also, when I copy a cell and paste it into another cell, it removes the existing data and doesn't paste properly.

In the screenshot below, when I copy 'Ross Pearson' and paste it into the second row, it clears the data instead of pasting correctly.

Here is a live demo of my problem.
DEMO

Your environment

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: Data, Grid, Premium, Copy, paste, checkbox, dropdown, select, multiple
Order ID: 91010

[michelengelen]

Hey @mahammahmood,

No worries, these aren't bugs – just some areas where we can optimize your code!

Here's the breakdown:

• Rerenders in CustomEditComponent: You're calling setLocationTaskAssign on every selection in your CustomEditComponent. This triggers a full rerender because it updates the state. To avoid unnecessary rerenders, you should explore memoizing the component or extracting it.

• Parsing Pasted Values: When you copy complex values like arrays, the clipboard converts them to comma-separated strings. To handle this, we can add a valueSetter function that parses the pasted value before setting it.

These are simple fixes to keep your code running smoothly!

To get you started here is a very simple valueSetter you can use:

valueSetter: (value, row) => {
  console.log(value);
  let newValue = value;
  if (typeof value === 'string') {
    newValue = value.split(',');
  }
  return { ...row, radCenter: newValue };
},

If you need further help consider joining the community on our official discord server.

[mahammahmood]

I need to call setLocationTaskAssign on every selection. Could you suggest a solution that allows me to achieve this goal without triggering unnecessary re-renders?

…

________________________________ From: Michel Engelen ***@***.***> Sent: Wednesday, June 12, 2024 7:24 PM To: mui/mui-x ***@***.***> Cc: Maham Mahmood ***@***.***>; Mention ***@***.***> Subject: Re: [mui/mui-x] [data grid] Problems with copy/paste and the autocomplete dropdown (Issue #13461) Hey @mahammahmood<https://github.com/mahammahmood>, No worries, these aren't bugs – just some areas where we can optimize your code! Here's the breakdown: * Rerenders in CustomEditComponent: You're calling setLocationTaskAssign on every selection in your CustomEditComponent. This triggers a full rerender because it updates the state. To avoid unnecessary rerenders, you should explore memoizing the component or extracting it. * Parsing Pasted Values: When you copy complex values like arrays, the clipboard converts them to comma-separated strings. To handle this, we can add a valueSetter function that parses the pasted value before setting it. These are simple fixes to keep your code running smoothly! To get you started here is a very simple valueSetter you can use: valueSetter: (value, row) => { console.log(value); let newValue = value; if (typeof value === 'string') { newValue = value.split(','); } return { ...row, radCenter: newValue }; }, If you need further help consider joining the community on our official discord server<https://mui.com/r/discord/>. — Reply to this email directly, view it on GitHub<#13461 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/A3Q76C4KQAC37MQGZ54RHULZHBK2FAVCNFSM6AAAAABJFX7TQOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCNRTGE2TANRUGI>. You are receiving this because you were mentioned.Message ID: ***@***.***>

[michelengelen]

@mahammahmood since setLocationTaskAssign will update the state and rerender the component in its entirety there is no way to do what you want.

What do you intend to do with the array? Maybe there is another way around this with the selection state from the grid.

[github-actions]

The issue has been inactive for 7 days and has been automatically closed.