Repository: mui/material-ui (TypeScript)
Date: 2018-10-03 14:26:20+00:00
Task type: Bug Fix

Issue:
[TextField] "Uncaught TypeError: r.inputRef.focus is not a function" when clicking on InputAdornment
<!--- Provide a general summary of the issue in the Title above -->
Uncaught TypeError: r.inputRef.focus is not a function when clicking on InputAdornment
please take a look on screenshot below
<!--
    Thank you very much for contributing to Material-UI by creating an issue! ❤️
    To avoid duplicate issues we ask you to check off the following list.
-->

<!-- Checked checkbox should look like this: [x] -->
- [x] This is not a v0.x issue. <!-- (v0.x is no longer maintained) -->
- [x] I have searched the [issues](https://github.com/mui-org/material-ui/issues) of this repository and believe that this is not a duplicate.

## Expected Behavior
No errors should be threw
<!---
    
-->

## Current Behavior
JavaScript Uncaught TypeError: r.inputRef.focus is not a function
<!---
   
-->

## Steps to Reproduce
<!---
    Provide a link to a live example (you can use codesandbox.io) and an unambiguous set of steps to reproduce this bug.
    Include code to reproduce, if relevant (which it most likely is).

    This codesandbox.io template _may_ be a good starting point:
    https://codesandbox.io/s/github/mui-org/material-ui/tree/master/examples/create-react-app

    If you're using typescript a better starting point would be
    https://codesandbox.io/s/github/mui-org/material-ui/tree/master/examples/create-react-app-with-typescript

    If YOU DO NOT take time to provide a codesandbox.io reproduction, should the COMMUNITY take time to help you?

-->
Link:
![mui_input_click_err](https://user-images.githubusercontent.com/3086970/46354180-14f3ed80-c66f-11e8-909a-8fe3579aa6da.png)

## Context
<!---
    What are you trying to accomplish? How has this issue affected you?
    Providing context helps us come up with a solution that is most useful in the real world.
-->

## Your Environment
<!---
    Include as many relevant details about the environment with which you experienced the bug.
    If you encounter issues with typescript please include version and tsconfig.
-->

| Tech         | Version |
|--------------|---------|
| Material-UI  | v3.1.2  |
| React        |  16.5.2    |
| Browser      |  Google Chrome 69.0.3497.100 (Official Build) (64-bit)  Ubuntu 18.04  |
| TypeScript   |     no    |
| etc.         |         |



Issue discussion:
This is caused by https://github.com/mui-org/material-ui/blob/e30c2ac7e2d2ff52e6dc7a63e0bcf1199fe4329d/packages/material-ui/src/Select/SelectInput.js#L146-L152

Not sure why this is used. I guess this is for internal usage only? Any insight @oliviertassinari 
A diff like this should do it:

```diff
 const nodeProxy = { 
   node: ref, 
   // By pass the native input as we expose a rich object (array). 
   value: this.props.value, 
+  focus: () => {
+    this.displayRef.focus();
+  },
 }; 
```

@MustD Do you want to work on it?
> Not sure why this is used. I guess this is for internal usage only? 

@eps1lon Yes, it's for internal use only. The InputBase component is using it for determining some state.
> @MustD Do you want to work on it?

@oliviertassinari Yes, why not, ill try

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
@@ -147,6 +147,9 @@ class SelectInput extends React.Component {
       node: ref,
       // By pass the native input as we expose a rich object (array).
       value: this.props.value,
+      focus: () => {
+        this.displayRef.focus();
+      },
     };
 
     setRef(inputRef, nodeProxy);


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
@@ -354,5 +354,19 @@ describe('<SelectInput />', () => {
       mount(<SelectInput {...defaultProps} inputRef={ref} />);
       assert.strictEqual(ref.current.node.tagName, 'INPUT');
     });
+
+    it('should be able to return the input focus proxy function', () => {
+      const ref = React.createRef();
+      mount(<SelectInput {...defaultProps} inputRef={ref} />);
+      assert.strictEqual(typeof ref.current.focus, 'function');
+    });
+
+    it('should be able to hit proxy function', () => {
+      const ref = React.createRef();
+      const onFocus = spy();
+      mount(<SelectInput {...defaultProps} inputRef={ref} onFocus={onFocus} />);
+      ref.current.focus();
+      assert.strictEqual(onFocus.called, true);
+    });
   });
 });