Skip to content

onChange event for selects not handling value correctly #12709

@Swazimodo

Description

@Swazimodo

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.

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions