Repository: mui/material-ui (TypeScript)
Date: 2018-08-10 12:05:33+00:00
Task type: Bug Fix

Issue:
[Select] onBlur event target
There is some mismatch with [Select] events.

```javascript
<Select 
    onChange={console.log} 
    onBlur={console.log}
>
    {options}
</Select>
```

In this case, both events are fired, but onChange has ```event.target``` set to [Input] with appropriate attributes, but onBlur has ```event.target``` set to [Select]. Even when onBlur is set directly to [Input], ```event.target``` is still [Select].

Problem is that this makes onBlur event useless when you need handle input value onBlur in stateless components. You can't read input value or any of attributes. 


Issue discussion:
@Mangatt We are trying to simulate a native select. The implementation is challenging. The blur event comes from a div: https://github.com/mui-org/material-ui/blob/4bf97b52113f104174f0cd850bfc2a8fc73c2d99/packages/material-ui/src/Select/SelectInput.js#L287
Just a suggestion, wouldn't be better to pass name/value in event.target, same way that it is handled in onChange event in https://github.com/mui-org/material-ui/blob/a207808404a703d1ea2b03ac510343be6404b166/packages/material-ui/src/Select/SelectInput.js#L102?
@Mangatt Yeah, maybe.
@Mangatt Alright, this sounds like a good idea. Do you want to work on it? I think that we can copy #12231.
@oliviertassinari I can work on this one? Just to confirm the agreed upon solution is to pass `value` and `name` as part of the `event.target`?
@hassan-zaheer It would be great, since I'm unavailable to work on this issue right now. And I guess that no one else is working on this.
np I can submit a fix tonight

Solution patch:
diff --git a/packages/material-ui/src/Select/SelectInput.js b/packages/material-ui/src/Select/SelectInput.js
--- a/packages/material-ui/src/Select/SelectInput.js
+++ b/packages/material-ui/src/Select/SelectInput.js
@@ -108,6 +108,9 @@ class SelectInput extends React.Component {
     }
 
     if (this.props.onBlur) {
+      const { value, name } = this.props;
+      event.persist();
+      event.target = { value, name };
       this.props.onBlur(event);
     }
   };


Test patch:
diff --git a/packages/material-ui/src/Select/SelectInput.test.js b/packages/material-ui/src/Select/SelectInput.test.js
--- a/packages/material-ui/src/Select/SelectInput.test.js
+++ b/packages/material-ui/src/Select/SelectInput.test.js
@@ -174,6 +174,21 @@ describe('<SelectInput />', () => {
       assert.strictEqual(handleBlur.callCount, 1);
     });
 
+    it('should pass "name" as part of the event.target for onBlur', () => {
+      const handleBlur = spy();
+      wrapper.setProps({ onBlur: handleBlur, name: 'blur-testing' });
+
+      wrapper.find(`.${defaultProps.classes.select}`).simulate('click');
+      assert.strictEqual(wrapper.state().open, true);
+      assert.strictEqual(instance.ignoreNextBlur, true);
+      wrapper.find(`.${defaultProps.classes.select}`).simulate('blur');
+      assert.strictEqual(handleBlur.callCount, 0);
+      assert.strictEqual(instance.ignoreNextBlur, false);
+      wrapper.find(`.${defaultProps.classes.select}`).simulate('blur');
+      assert.strictEqual(handleBlur.callCount, 1);
+      assert.strictEqual(handleBlur.args[0][0].target.name, 'blur-testing');
+    });
+
     ['space', 'up', 'down'].forEach(key => {
       it(`'should open menu when pressed ${key} key on select`, () => {
         wrapper