diff --git a/README.md b/README.md index ac2657e..35b2aa5 100644 --- a/README.md +++ b/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={() => Loading} trigger={{ ... }} - ref={(textarea) => { this.textarea = textarea; } } + ref={(rta) => { this.rta = rta; } } onCaretPositionChange={this.onCaretPositionChange} /> @@ -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, diff --git a/__tests__/index.spec.js b/__tests__/index.spec.js index 0c21f93..47e0f65 100644 --- a/__tests__/index.spec.js +++ b/__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'); }); }); diff --git a/cypress/integration/textarea.js b/cypress/integration/textarea.js index 37621d5..ce16d4b 100644 --- a/cypress/integration/textarea.js +++ b/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 }); diff --git a/example/App.jsx b/example/App.jsx index 96f759b..1716f5a 100644 --- a/example/App.jsx +++ b/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 { +
Actual token in "[" provider:{' '} {actualTokenInProvider} @@ -199,6 +206,9 @@ class App extends React.Component { ref={ref => { this.rtaRef = ref; }} + innerRef={ref => { + this.textareaRef = ref; + }} loadingComponent={Loading} style={{ padding: 5, diff --git a/src/Textarea.jsx b/src/Textarea.jsx index 28a44d0..7a5b27c 100644 --- a/src/Textarea.jsx +++ b/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<