Fix #547

components/input/Input.js

@@ -157,6 +157,6 @@ const factory = (FontIcon) => {
 };
 
 const Input = factory(InjectedFontIcon);
-export default themr(INPUT)(Input);
+export default themr(INPUT, null, { withRef: true })(Input);
 export { factory as inputFactory };
 export { Input };

components/input/index.js

@@ -5,7 +5,7 @@ import FontIcon from '../font_icon/FontIcon.js';
 import theme from './theme.scss';
 
 const Input = inputFactory(FontIcon);
-const ThemedInput = themr(INPUT, theme)(Input);
+const ThemedInput = themr(INPUT, theme, { withRef: true })(Input);
 
 export default ThemedInput;
 export { ThemedInput as Input };

components/input/readme.md

@@ -67,3 +67,10 @@ If you want to provide a theme via context, the component key is `RTInput`.
 | `label` | Used for the label when the input has a label.|
 | `required` | Used in case the input is required.|
 | `withIcon` | Added to the root class if the input has icon.|
+
+## Methods
+
+The `Input` component has some imperative methods that are used as a bypass to the native rendered DOM element. To call this methods you will need to retrieve the instance of the component. Check the [Install](http://react-toolbox.com/#/install) section for details on how to do this. The methods included for the `Input` are:
+
+- `blur` used to blur the `input` element.
+- `focus` used to focus the `input` element.

docs/app/components/layout/install/install.md

@@ -181,6 +181,12 @@ React Toolbox assumes that you are importing [Roboto Font](https://www.google.co
 
 In order to import the fonts for you, we'd need to include them in the CSS which is considered a bad practice. If you are not including them in your app, go to the linked sites and follow the instructions.
 
+## References to Components
+
+As mentioned in the theming section, you'd usually import a component with a theme already injected. To do this we use a [Higher Order Component](http://github.com/javivelasco/react-css-themr). If you add a `ref` property to a React Toolbox component, what you will get is the **HOC** instead of the **Wrapped** component.
+
+For components with imperative methods such as the `Input`, you can also get its real instance instead of the HOC. To do this, the HOC includes a `getWrappedInstance` method that returns the wrapped component instance. This way you can call methods directly on the component's instance.
+
 ## Server Side Rendering
 
 The only requirement for SSR is to be able to require ES6 and CSS Modules in the backend. To make it possible you can check projects like [CSS Modules register hook](https://github.com/css-modules/css-modules-require-hook) or [Webpack Isomorphic tools](https://github.com/halt-hammerzeit/webpack-isomorphic-tools). Also, make sure you can import from `node_modules`.

lib/input/Input.js

@@ -235,6 +235,6 @@ var factory = function factory(FontIcon) {
 };
 
 var Input = factory(_FontIcon2.default);
-exports.default = (0, _reactCssThemr.themr)(_identifiers.INPUT)(Input);
+exports.default = (0, _reactCssThemr.themr)(_identifiers.INPUT, null, { withRef: true })(Input);
 exports.inputFactory = factory;
 exports.Input = Input;

lib/input/index.js

@@ -22,7 +22,7 @@ var _theme2 = _interopRequireDefault(_theme);
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var Input = (0, _Input.inputFactory)(_FontIcon2.default);
-var ThemedInput = (0, _reactCssThemr.themr)(_identifiers.INPUT, _theme2.default)(Input);
+var ThemedInput = (0, _reactCssThemr.themr)(_identifiers.INPUT, _theme2.default, { withRef: true })(Input);
 
 exports.default = ThemedInput;
 exports.Input = ThemedInput;