KevinVandy/material-react-table

Column editSelectOptions array with label and value do not select label in edit mode

SanjayKumarRahul opened this issue · 2 comments

material-react-table version

2.13.0

react & react-dom versions

18.2.0 & 18.2.0

Describe the bug and the steps to reproduce it

Define a array with label and value:
export const usStates = [ {label:'Ohio', value:'OH'}, {label:'Rhode Island', value:'RI'}, ];

Use this array into column:
{ accessorKey: 'state', header: 'State', editVariant: 'select', editSelectOptions: usStates, muiEditTextFieldProps: { select: true, error: !!validationErrors?.state, helperText: validationErrors?.state, },

Table data:

image

When in edit mode:

The problem is label is not selected from dropdown option.

image

When dropdown is clicked the label is shown as it should:
image

Minimal, Reproducible Example - (Optional, but Recommended)

Code Sand Box Example

https://codesandbox.io/p/devbox/upbeat-lamarr-nwfmp8

Screenshots or Videos (Optional)

No response

Do you intend to try to help solve this bug with your own PR?

None

Terms

  • I understand that if my bug cannot be reliably reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

did you figure out how to solve it?

The value has to match the values in your data or else this will happen.