Incorrect typing for `mantineEditSelectProps` column option (multi-select vs. select)?

[juliusv]

mantine-react-table version

2.0.0-beta.8

react & react-dom versions

19.0.0

Describe the bug and the steps to reproduce it

When I add column options for a single-select edit mode (select and not multi-select), like:

  const columns = useMemo<MRT_ColumnDef<{ my_option: string }>[]>(
    () => [
      {
        accessorKey: "my_option",
        header: "My Option",
        editVariant: "select",
        mantineEditSelectProps: ({ row }) => ({
          data: [
            { value: "1", label: "Option 1" },
            { value: "2", label: "Option 2" },
          ],
          onChange: (value) => {
            console.log(typeof value); // This outputs "string".
            parseInt(value); // This produces a type error, saying that "value" should be a "string[]".
          },
        }),
      },
    ],
    []
  );

...then the TypeScript type of the value parameter of the onChange handler is string[] instead of the actual underlying type of the passed-in object, which is just string, and you get a type error like this:

Argument of type 'string[] | FormEvent<HTMLInputElement>' is not assignable to parameter of type 'string'.
  Type 'string[]' is not assignable to type 'string'.

The underlying issue seems to be that the typing here is off:

mantine-react-table/packages/mantine-react-table/src/types.ts

Lines 538 to 545 in 2a943be

	mantineEditSelectProps?:
	| ((props: {
	cell: MRT_Cell<TData, TValue>;
	column: MRT_Column<TData, TValue>;
	row: MRT_Row<TData>;
	table: MRT_TableInstance<TData>;
	}) => HTMLPropsRef<HTMLInputElement> & Partial<MultiSelectProps>)
	| (HTMLPropsRef<HTMLInputElement> & Partial<MultiSelectProps>);

Note that it says Partial<MultiSelectProps> instead of Partial<SelectProps>.

It looks like this is only an issue for the columnar option, not for the equivalent option for the whole table, which correctly uses Partial<SelectProps>:

mantine-react-table/packages/mantine-react-table/src/types.ts

Lines 902 to 909 in 2a943be

	mantineEditSelectProps?:
	| ((props: {
	cell: MRT_Cell<TData, MRT_CellValue>;
	column: MRT_Column<TData, MRT_CellValue>;
	row: MRT_Row<TData>;
	table: MRT_TableInstance<TData>;
	}) => HTMLPropsRef<HTMLInputElement> & Partial<SelectProps>)
	| (HTMLPropsRef<HTMLInputElement> & Partial<SelectProps>);

Minimal, Reproducible Example - (Optional, but Recommended)

const columns = useMemo<MRT_ColumnDef<{ my_option: string }>[]>(
    () => [
      {
        accessorKey: "my_option",
        header: "My Option",
        editVariant: "select",
        mantineEditSelectProps: ({ row }) => ({
          data: [
            { value: "1", label: "Option 1" },
            { value: "2", label: "Option 2" },
          ],
          onChange: (value) => {
            console.log(typeof value); // This outputs "string".
            parseInt(value); // This produces a type error, saying that "value" should be a "string[]".
          },
        }),
      },
    ],
    []
  );

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.

[alessandrojcm]

Closed in #510