-
-
Notifications
You must be signed in to change notification settings - Fork 32.7k
Description
The value property for a Select component has a type definition of Array<string | number> | string | number. However, if you look at the onChange event event.target.value has a type definition of just string. I'm trying to get a multiselect this working but I found this confusing and suspect it's a bug.
- This is a v1.x issue
- I have searched the issues of this repository and believe that this is not a duplicate.
Expected Behavior
I believe the value you get from the onChange event should match the type you can supply in the component props.
Current Behavior
I have not fully tested this but at least the type returned is only a string.
Steps to Reproduce
Here is code similar to what I'm doing.
export interface IOption {
label: string;
value: string | number;
fixedValue?: boolean;
disabled?: boolean;
}
interface IComponentProps {
options: IOption[];
values: Array<string | number> | string | number;
}
<Select
multiple
onChange={this.handleChange}
value={this.props.values}
>
{this.props.options.map(this.renderOption)}
</Select>
renderOption = (x: IOption, i: number) => {
return <MenuItem key={i} value={x.value}>{x.label}</MenuItem>
}
handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
console.log('onChange', event.target.value);
}
Context
Right now creating a multiselect feels like it takes too much legwork and from what I have seen people are using other packages to make it work.
Your Environment
| Tech | Version |
|---|---|
| Material-UI | v^1.1.0 |
| React | v^16.3.2 |
| Chrome | v68.0.3440.106 |
| TypeScript | v2.8.4 |
Update
I was able to confirm this is only a typescript issue. In the onChange event event.target.value will give you an array if you have multiple items selected.