feat: innerRef prop to get Ref to textarea (#69)

Now you can easily get Ref of underlying textarea.

The other approach is to access to `this.rtaRef.textareaRef` but `innerRef={(ref) => {this.textareaRef = ref}}` is now preffered.

Author: jukben

README.md

@@ -34,12 +34,13 @@ or there is UMD build available. [Check out this pen as example](https://codepen
 
 ## Props
 
-*Note: Every other props than the mentioned below will be propagated to textarea itself*
+> *☝️ Note: Every other props than the mentioned below will be propagated to the textarea itself*
 
 | Props         | Type           |  Description 
 | :------------- | :-------------  |  ---------
 | **trigger*** | Object: Trigger type | Define triggers and their corresponding behavior
 | **loadingComponent*** | React Component | Gets `data` props which is already fetched (and displayed) suggestion 
+| innerRef | Function: (HTMLTextAreaElement) => void) | Allows you to get React ref of the underlying textarea
 | minChar | Number | Number of characters that user should type for trigger a suggestion. Defaults to 1.
 | onCaretPositionChange | Function: (number) => void | Listener called every time the textarea's caret position is changed. The listener is called with one attribute - caret position denoted by an integer number.
 | closeOnClickOutside | boolean | When it's true autocomplete will close when use click outside. Defaults to false.
@@ -83,11 +84,11 @@ class App extends Component {
   }
 
   resetCaretPosition = () => {
-    this.textarea.setCaretPosition(0);
+    this.rta.setCaretPosition(0);
   }
 
   printCurrentCaretPosition = () => {
-    const caretPosition = this.textarea.getCaretPosition();
+    const caretPosition = this.rta.getCaretPosition();
     console.log(`Caret position is equal to ${caretPosition}`);
   }
 
@@ -102,7 +103,7 @@ class App extends Component {
           className="my-textarea"
           loadingComponent={() => <span>Loading</span>}
           trigger={{ ... }}
-          ref={(textarea) => { this.textarea = textarea; } }
+          ref={(rta) => { this.rta = rta; } }
           onCaretPositionChange={this.onCaretPositionChange}
         />
       </div>
@@ -184,6 +185,8 @@ class App extends Component {
             lineHeight: "20px",
             padding: 5
           }}
+          ref={(rta) => { this.rta = rta; } }
+          innerRef={(textarea) => { this.textarea = textarea; } }
           containerStyle={{
             marginTop: 20,
             width: 400,

__tests__/index.spec.js

@@ -495,8 +495,8 @@ describe('object-based items without keys and custom unique generator', () => {
 
   it('should generate unique value by the output generator', () => {
     const items = rta.find(Item);
-    expect(items.at(0).key()).toEqual("11");
-    expect(items.at(1).key()).toEqual("12");
-    expect(items.at(2).key()).toEqual("13");
+    expect(items.at(0).key()).toEqual('11');
+    expect(items.at(1).key()).toEqual('12');
+    expect(items.at(2).key()).toEqual('13');
   });
 });

cypress/integration/textarea.js

@@ -24,6 +24,12 @@ describe('React Textarea Autocomplete', () => {
     cy.get('.rta__textarea');
   });
 
+  it('focus textarea by innerRef', () => {
+    cy.focused().should('not.be.visible');
+    cy.get('[data-test="focus"]').click();
+    cy.focused().should('be.visible');
+  });
+
   context('basic', () => {
     beforeEach(() => {
       cy.get('.rta__textarea').clear({ force: true });

example/App.jsx

@@ -105,6 +105,10 @@ class App extends React.Component {
    */
   _outputCaretDefault = item => item.char;
 
+  _focus = () => {
+    this.textareaRef.focus();
+  };
+
   render() {
     const {
       optionsCaret,
@@ -189,6 +193,9 @@ class App extends React.Component {
         <button data-test="getSelectedText" onClick={this._getSelectedText}>
           getSelectedText();
         </button>
+        <button data-test="focus" onClick={this._focus}>
+          Focus the textarea
+        </button>
         <div>
           Actual token in "[" provider:{' '}
           <span data-test="actualToken">{actualTokenInProvider}</span>
@@ -199,6 +206,9 @@ class App extends React.Component {
           ref={ref => {
             this.rtaRef = ref;
           }}
+          innerRef={ref => {
+            this.textareaRef = ref;
+          }}
           loadingComponent={Loading}
           style={{
             padding: 5,

src/Textarea.jsx

@@ -363,6 +363,7 @@ class ReactTextareaAutocomplete extends React.Component<
       'containerStyle',
       'minChar',
       'ref',
+      'innerRef',
       'onChange',
       'onCaretPositionChange',
       'className',
@@ -591,6 +592,7 @@ class ReactTextareaAutocomplete extends React.Component<
         <textarea
           {...this._cleanUpProps()}
           ref={ref => {
+            this.props.innerRef && this.props.innerRef(ref);
             this.textareaRef = ref;
           }}
           className={`rta__textarea ${className || ''}`}

src/types.js

@@ -67,6 +67,7 @@ export type TextareaProps = {
   onSelect: ?(SyntheticEvent<*> | Event) => void,
   onBlur: ?(SyntheticEvent<*> | Event) => void,
   onCaretPositionChange: ?(number) => void,
+  innerRef: ?(HTMLTextAreaElement) => void,
   closeOnClickOutside?: boolean,
   movePopupAsYouType?: boolean,
   minChar: ?number,