fix(select): prop value should be string only (#725)

packages/select/NativeControl.tsx

@@ -31,6 +31,7 @@ export interface NativeControlProps extends React.HTMLProps<HTMLSelectElement> {
   foundation: MDCSelectFoundation;
   setRippleCenter: (lineRippleCenter: number) => void;
   handleDisabled: (disabled: boolean) => void;
+  value: string;
 }
 
 export default class NativeControl extends React.Component<
@@ -49,6 +50,7 @@ export default class NativeControl extends React.Component<
     },
     setRippleCenter: () => {},
     handleDisabled: () => {},
+    value: '',
   };
 
 

packages/select/README.md

@@ -76,6 +76,7 @@ class MyApp extends React.Component {
       <Select
         label='Choose Dog'
         onChange={(evt) => this.setState({value: evt.target.value})}
+        value={this.state.value}
         options={options}
       />
     );
@@ -103,6 +104,7 @@ nativeControlClassName | String | An optional class added to the native `<select
 notchedOutlineClassName | String | An optional class added to the notched outline element. Only applied if `props.outlined` is enabled.
 outlined | Boolean | Enables outlined variant.
 options | Array{String/Object} | Array of strings or objects to be used as options. To be used instead of `<option>` elements passed as `this.props.children`. If its an array of strings, then the string value will be used as the `label` and `value` of the `<option>` tag.
+value | String | Optional property used to control the selected value outside of `<Select>` component.
 
 ### Sass Mixins
 

packages/select/index.tsx

@@ -43,10 +43,11 @@ export interface SelectProps extends React.HTMLProps<HTMLSelectElement> {
   notchedOutlineClassName: string;
   outlined: boolean;
   options: SelectOptionsType;
+  value?: string;
 }
 
 interface SelectState {
-  value?: string | string[] | number,
+  value?: string;
   classList: Set<string>;
   disabled: boolean;
   labelIsFloated: boolean;