[Select] onChange event Typescript typing is incorrect

[thupi]

• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

The Typescript type for onChange on Select should be string[]. Also the docs says that onChange takes two arguments

Current Behavior

The Typescript type for onChange on Select is string and the typing allows only for one argument.

Steps to Reproduce (for bugs)

Im not quite sure how to reproduce typing errors using codesandbox. Please let me know if a reproduction repo is needed. If so i will quickly create a repo for that.

1. Use Select component in a Typescript project(in my case typescript@2.7.2)
2. Pass in (event, two) => { const value = event.target.value; value.join(','); console.log(two); }

Due to the usage of React.ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement> for the onChange prop the type and behavior is not identical.

Context

I am trying to create a generic MultiSelect component using the Select component.

Your Environment

Tech	Version
Material-UI	1.0.0-beta.37
React	16.2.0
Typescript	2.7.2

[oliviertassinari]

I don't think that your expectation is 100% accurate. However, I believe we need to make the onChange definition less restrictive.
https://github.com/mui-org/material-ui/blob/6226e456ecc3578f0d1235a3091317d57d79c886/src/Input/Input.d.ts#L43
https://github.com/mui-org/material-ui/blob/6226e456ecc3578f0d1235a3091317d57d79c886/src/Select/SelectInput.d.ts#L16
https://github.com/mui-org/material-ui/blob/6226e456ecc3578f0d1235a3091317d57d79c886/src/Select/Select.d.ts#L6
https://github.com/mui-org/material-ui/blob/8d356d3c609884bd9d09ab647925e8c60cb838d8/src/Select/Select.js#L147-L153

[t49tran]

Hi @oliviertassinari, I think we can update SelectInput onChange type definition then make Select onChange to follow that of SelectInput without affecting InputProps definition.

Personally, I think InputProps.onChange definition at the moment is pretty sound.

export interface SelectInputProps extends StandardProps<{}, SelectInputClassKey> {
  ...
  onChange?: (event: React.ChangeEvent<HTMLSelectElement>, child: React.ReactNode) => void;
  ...
}

export interface SelectProps extends StandardProps<InputProps, SelectClassKey, 'value' | 'onChange'> {
 ...
  onChange: SelectInputProps['onChange'];
  ...
}

What do you think ?

[oliviertassinari]

@t49tran This sounds good to me. Do you want to submit a pull-request? :)

[t49tran]

Yes, I just created one.