[data grid] How to handle nullable values for singleSelect columns? about mui-x HOT 2 OPEN

Hey @filipneculciu,

Warning: value prop on input should not be null. Consider using an empty string to clear the component or undefined for uncontrolled components.

The problem mentioned is with the underlying native input event, not even with the underlying material component used (Select). You can observe the same error in this example where no MUI component is used: https://stackblitz.com/edit/vitejs-vite-wbs7mo?file=src%2FApp.tsx,src%2Fmain.tsx&terminal=dev

So, by definition, you can not pass null value to the input element. A common solution proposed to the same problem would be to use the empty string '' instead (example). You can have a translation layer between FE-BE.

Frontend Side:
If you receive values like this: const roles = ["Market", "Finance", "Development", null] as mentioned in the attached example, you can have it translated to '' like so:

{
  field: "role",
  headerName: "Department",
  width: 220,
  editable: true,
  type: "singleSelect",
  valueOptions: roles.map((value) =>
    value !== null
      ? { value: value, label: value }
      : { value: '', label: "None" }
  ),
}

Backend Side:
Since the backend would expect back the null values in return, you can handle this translation in processRowUpdate callback.

const processRowUpdate = async (newRow: GridRowModel) => {
  const updatedRow = { ...newRow, isNew: false } as GridRowModel;
  const serverRow = { ...updatedRow, role: updatedRow.role === '' ? null : updatedRow.role};
  setLoading(true); // optional optimization with the `loading` prop passed to the grid
  await server.post('https://api.url', serverRow); // send the row with `null` value on server
  setLoading(false);
  return updatedRow; // return the value with `''` value on FE
};

Here's the modified sandbox: https://codesandbox.io/p/sandbox/snowy-cache-pf36j5?file=%2Fsrc%2FDemo.tsx%3A35%2C36

Let me know if it makes sense.

Thank you!

from mui-x.

Yes, it makes sense; this is the workaround I was thinking about in the last sentence of my paragraph. I guess this translation layer is unavoidable, I was thinking that maybe there was an option to have the DataGrid do it internally.

There is one issue that this mapping causes and it's reproducible in your sandbox (https://codesandbox.io/p/sandbox/snowy-cache-pf36j5?file=%2Fsrc%2FDemo.tsx%3A35%2C36). Open then filtering menu for the "Department" column and you'll get the following warning in the console:
Warning: Encountered two children with the same key, ``. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

I guess this is because the value is '' for both no selection and for "None". Do you have a suggestion to fix this? My only idea was to try something with non-printable characters instead of '', but this solution seems hacky to me.

from mui-x.