Use data-value attribute instead of value for an <li/>, when firing onChange call with the event followed by the value instead of mutating the target

Signed-off-by: Ryan Dy <rdy@pivotal.io>

Author: Jeanette Booher

spec/pivotal-ui-react/select/select_spec.js

@@ -113,7 +113,7 @@ describe('Select', () => {
 
       it('calls then onChange callback', () => {
         //cannot assert on event object due to phantomJS limitation
-        expect(onChangeSpy).toHaveBeenCalledWith(jasmine.any(Object));
+        expect(onChangeSpy).toHaveBeenCalledWith(jasmine.any(Object), 'one');
       });
 
       it('updates the selected value', () => {

src/react/select/select.js

@@ -38,13 +38,12 @@ export class Select extends mixin(React.Component).with(Scrim, Transition) {
   toggle = () => this.setState({open: !this.state.open});
 
   select = e => {
-    const value = e.target.getAttribute('value');
-    Object.defineProperty(e.target, 'value', {value});
+    const value = e.target.getAttribute('data-value');
 
     this.setState({
       open: false,
       uncontrolledValue: value
-    }, this.props.onChange && this.props.onChange(e));
+    }, this.props.onChange && this.props.onChange(e, value));
   };
 
   scrimClick = () => this.setState({open: false});
@@ -63,7 +62,7 @@ export class Select extends mixin(React.Component).with(Scrim, Transition) {
         className,
         key: value,
         role: 'button',
-        value,
+        'data-value': value,
         onClick: this.select
       }}>{label}</li>);
       return memo;