react-toolkit icon indicating copy to clipboard operation
react-toolkit copied to clipboard

Issues in the Migration Documentation (v2.3.x → v3.0.x)

Open ElammariYoussef opened this issue 11 months ago • 0 comments

While following the migration guide from v2.3.x to v3.0.x (MIGRATION.md), I encountered several inconsistencies regarding the onChange event handling for some form components.

  • Issue with the Choice component The documentation states that values should be retrieved using event.target.value, but this does not apply to the Choice component. • For Choice, you must continue using event.value. • Additionally, event is not of type React.ChangeEvent (the native onChange event).

  • Issue with the File component The documentation suggests using event.target.value, but to retrieve uploaded files, you need to use event.values instead.

  • Issue with the Checkbox component Similar to File, the correct way to retrieve values is event.values, not event.target.value.

  • Undocumented change in MultiSelectInput The type of the onChange event has changed, but this is not mentioned in the migration guide.

Before (v2.3.x)

The event passed an object { values: string[] }:

<MultiSelectInput
    ...
    onChange={(e: { values: string[] }) => {
        // Processing
    }}
/>

Values were retrieved with something like this:

e.values?.filter(value => !!value).join(',')

After (v3.0.x)

The event now passes an array of objects { id: string, label: string, value: string }:

type TMultiSelectValue = {
  id: string;
  label: string;
  value: string;
};

<MultiSelectInput
    ...
    onChange={(e: TMultiSelectValue[]) => {
        // Processing
    }}
/>

Values should now be retrieved by doing something like this:

e.map(x => x.value).filter(value => !!value).join(',')

  • Suggested Improvement

I believe it would be helpful to update the migration documentation with these details to prevent confusion during the upgrade.

ElammariYoussef avatar Feb 24 '25 13:02 ElammariYoussef