Merge pull request #83 from nkbt/inputRef

Add inputRef prop to pass as ref to input element

Author: nkbt

README.md

@@ -132,6 +132,12 @@ Notification of current value will be sent immediately by hitting `Enter` key. E
 
 Same as `forceNotifyByEnter`, but notification will be sent when focus leaves the input field.
 
+#### `inputRef`: PropTypes.func (default: undefined)
+
+Will pass `ref={inputRef}` to generated input element. We needed to rename `ref` to `inputRef` since `ref` is a special prop in React and cannot be passed to children. 
+
+See [./example/Ref.js](./example/Ref.js) for usage example.
+
 #### Arbitrary props will be transferred to rendered `<input>`
 
 ```js

example/App.js

@@ -3,6 +3,7 @@ import {Controllable} from './Controllable';
 import {Customizable} from './Customizable';
 import {UndoRedo} from './UndoRedo';
 import {Textarea} from './Textarea';
+import {Ref} from './Ref';
 
 
 export const App = () => (
@@ -27,5 +28,10 @@ export const App = () => (
       <h2>Example 4. Debounced Textarea</h2>
       <Textarea />
     </section>
+
+    <section className="section">
+      <h2>Example 5. Custom ref</h2>
+      <Ref />
+    </section>
   </div>
 );

example/Ref.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import {DebounceInput} from '../src';
+
+
+export class Ref extends React.Component {
+  state = {
+    value: '',
+    key: undefined
+  };
+
+
+  render() {
+    const {
+      value,
+      key
+    } = this.state;
+
+    return (
+      <div>
+        <div className="config">
+          <label className="label">
+            <button onClick={() => this.ref.focus()}>Focus, please</button>
+          </label>
+
+          <label className="label">
+            <button onClick={() => this.ref.blur()}>Blur, please</button>
+          </label>
+        </div>
+
+        <DebounceInput
+          inputRef={ref => {
+            this.ref = ref;
+          }}
+          onChange={e => this.setState({value: e.target.value})}
+          onKeyDown={e => this.setState({key: e.key})} />
+        <p>Value: {value}</p>
+        <p>Key pressed: {key}</p>
+      </div>
+
+    );
+  }
+}

src/Component.js

@@ -17,7 +17,8 @@ export class DebounceInput extends React.PureComponent {
     minLength: PropTypes.number,
     debounceTimeout: PropTypes.number,
     forceNotifyByEnter: PropTypes.bool,
-    forceNotifyOnBlur: PropTypes.bool
+    forceNotifyOnBlur: PropTypes.bool,
+    inputRef: PropTypes.func
   };
 
 
@@ -30,7 +31,8 @@ export class DebounceInput extends React.PureComponent {
     minLength: 0,
     debounceTimeout: 100,
     forceNotifyByEnter: true,
-    forceNotifyOnBlur: true
+    forceNotifyOnBlur: true,
+    inputRef: undefined
   };
 
 
@@ -91,6 +93,30 @@ export class DebounceInput extends React.PureComponent {
   };
 
 
+  onKeyDown = event => {
+    const {onKeyDown} = this.props;
+
+    if (event.key === 'Enter') {
+      this.forceNotify(event);
+    }
+    // Invoke original onKeyDown if present
+    if (onKeyDown) {
+      onKeyDown(event);
+    }
+  };
+
+
+  onBlur = event => {
+    const {onBlur} = this.props;
+
+    this.forceNotify(event);
+    // Invoke original onBlur if present
+    if (onBlur) {
+      onBlur(event);
+    }
+  };
+
+
   createNotifier = debounceTimeout => {
     if (debounceTimeout < 0) {
       this.notify = () => null;
@@ -107,9 +133,7 @@ export class DebounceInput extends React.PureComponent {
         debouncedChangeFunc(event);
       };
 
-      this.flush = () => {
-        debouncedChangeFunc.flush();
-      };
+      this.flush = () => debouncedChangeFunc.flush();
 
       this.cancel = () => {
         this.isDebouncing = false;
@@ -157,55 +181,37 @@ export class DebounceInput extends React.PureComponent {
       forceNotifyOnBlur,
       onKeyDown,
       onBlur,
+      inputRef,
       ...props
     } = this.props;
 
     let maybeOnKeyDown;
-
     if (forceNotifyByEnter) {
-      maybeOnKeyDown = {
-        onKeyDown: event => {
-          if (event.key === 'Enter') {
-            this.forceNotify(event);
-          }
-          // Invoke original onKeyDown if present
-          if (onKeyDown) {
-            onKeyDown(event);
-          }
-        }
-      };
+      maybeOnKeyDown = {onKeyDown: this.onKeyDown};
     } else if (onKeyDown) {
       maybeOnKeyDown = {onKeyDown};
     } else {
       maybeOnKeyDown = {};
     }
 
-
     let maybeOnBlur;
-
     if (forceNotifyOnBlur) {
-      maybeOnBlur = {
-        onBlur: event => {
-          this.forceNotify(event);
-          // Invoke original onBlur if present
-          if (onBlur) {
-            onBlur(event);
-          }
-        }
-      };
+      maybeOnBlur = {onBlur: this.onBlur};
     } else if (onBlur) {
       maybeOnBlur = {onBlur};
     } else {
       maybeOnBlur = {};
     }
 
+    const maybeRef = inputRef ? {ref: inputRef} : {};
 
     return React.createElement(element, {
       ...props,
       onChange: this.onChange,
       value: this.state.value,
       ...maybeOnKeyDown,
-      ...maybeOnBlur
+      ...maybeOnBlur,
+      ...maybeRef
     });
   }
 }