diff --git a/src/tokenizer/index.js b/src/tokenizer/index.js index 5b10f2e3..777f4df3 100644 --- a/src/tokenizer/index.js +++ b/src/tokenizer/index.js @@ -98,7 +98,7 @@ var TypeaheadTokenizer = React.createClass({ }, focus: function(){ - this.refs.typeahead.focus(); + this._typeahead.focus(); }, getSelectedTokens: function(){ @@ -148,7 +148,7 @@ var TypeaheadTokenizer = React.createClass({ // Remove token ONLY when bksp pressed at beginning of line // without a selection - var entry = this.refs.typeahead.refs.entry; + var entry = this._typeahead._entry; if (entry.selectionStart == entry.selectionEnd && entry.selectionStart == 0) { this._removeTokenForValue( @@ -175,7 +175,7 @@ var TypeaheadTokenizer = React.createClass({ } this.state.selected.push(value); this.setState({selected: this.state.selected}); - this.refs.typeahead.setEntryText(""); + this._typeahead.setEntryText(""); this.props.onTokenAdd(value); }, @@ -187,10 +187,13 @@ var TypeaheadTokenizer = React.createClass({ tokenizerClasses[this.props.className] = !!this.props.className; var tokenizerClassList = classNames(tokenizerClasses) + var _this = this; + var typeaheadRef = function(c){_this._typeahead = c}; + return (
{ this._renderTokens() } - this.props.maxVisible} resultsTruncatedMessage={this.props.resultsTruncatedMessage} onOptionSelected={this._onOptionSelected} @@ -188,7 +191,7 @@ var Typeahead = React.createClass({ }, _onOptionSelected: function(option, event) { - var nEntry = this.refs.entry; + var nEntry = this._entry; nEntry.focus(); var displayOption = Accessor.generateOptionToStringFor(this.props.inputDisplayOption || this.props.displayOption); @@ -206,7 +209,7 @@ var Typeahead = React.createClass({ }, _onTextEntryUpdated: function() { - var value = this.refs.entry.value; + var value = this._entry.value; this.setState({searchResults: this.getOptionsForValue(value, this.props.options), selection: '', entryValue: value}); @@ -324,10 +327,15 @@ var Typeahead = React.createClass({ var classList = classNames(classes); var InputElement = this.props.textarea ? 'textarea' : 'input'; + + var _this = this; + var entryRef = function(c) { _this._entry = c}; return (
{ this._renderHiddenInput() } - - + { this.props.children } diff --git a/src/typeahead/selector.js b/src/typeahead/selector.js index ac449161..9aea1cc7 100644 --- a/src/typeahead/selector.js +++ b/src/typeahead/selector.js @@ -49,7 +49,7 @@ var TypeaheadSelector = React.createClass({ if (this.props.customValue !== null) { customValueOffset++; customValue = ( - diff --git a/test/tokenizer-test.js b/test/tokenizer-test.js index 45b159b4..8d869cb3 100644 --- a/test/tokenizer-test.js +++ b/test/tokenizer-test.js @@ -12,14 +12,14 @@ var Keyevent = require('../src/keyevent'); var TestUtils = require('react-addons-test-utils'); function simulateTextInput(component, value) { - var node = component.refs.entry; + var node = component._entry; node.value = value; TestUtils.Simulate.change(node); return TestUtils.scryRenderedComponentsWithType(component, TypeaheadOption); } function simulateTokenInput(component, value) { - var typeahead = component.refs.typeahead; + var typeahead = component._typeahead; return simulateTextInput(typeahead, value); } @@ -82,7 +82,7 @@ describe('TypeaheadTokenizer Component', function() { it('should have custom and default token classes', function() { simulateTokenInput(this.component, 'o'); - var entry = this.component.refs.typeahead.refs.entry; + var entry = this.component._typeahead._entry; TestUtils.Simulate.keyDown(entry, { keyCode: Keyevent.DOM_VK_DOWN }); TestUtils.Simulate.keyDown(entry, { keyCode: Keyevent.DOM_VK_RETURN }); @@ -104,7 +104,7 @@ describe('TypeaheadTokenizer Component', function() { } } />); - var input = ReactDOM.findDOMNode(component.refs.typeahead.refs.entry); + var input = ReactDOM.findDOMNode(component._typeahead._entry); TestUtils.Simulate.keyDown(input, { keyCode: 87 }); }); }); @@ -120,7 +120,7 @@ describe('TypeaheadTokenizer Component', function() { } />); - var input = ReactDOM.findDOMNode(component.refs.typeahead.refs.entry); + var input = ReactDOM.findDOMNode(component._typeahead._entry); TestUtils.Simulate.keyPress(input, { keyCode: 87 }); }); }); @@ -136,7 +136,7 @@ describe('TypeaheadTokenizer Component', function() { } />); - var input = ReactDOM.findDOMNode(component.refs.typeahead.refs.entry); + var input = ReactDOM.findDOMNode(component._typeahead._entry); TestUtils.Simulate.keyUp(input, { keyCode: 87 }); }); }); @@ -181,7 +181,7 @@ describe('TypeaheadTokenizer Component', function() { />); var results = simulateTokenInput(component, 'john'); - var entry = component.refs.typeahead.refs.entry; + var entry = component._typeahead._entry; TestUtils.Simulate.keyDown(entry, { keyCode: Keyevent.DOM_VK_DOWN }); TestUtils.Simulate.keyDown(entry, { keyCode: Keyevent.DOM_VK_RETURN }); @@ -201,7 +201,7 @@ describe('TypeaheadTokenizer Component', function() { />); var results = simulateTokenInput(component, 'john'); - var entry = component.refs.typeahead.refs.entry; + var entry = component._typeahead._entry; TestUtils.Simulate.keyDown(entry, { keyCode: Keyevent.DOM_VK_DOWN }); TestUtils.Simulate.keyDown(entry, { keyCode: Keyevent.DOM_VK_RETURN }); @@ -221,7 +221,7 @@ describe('TypeaheadTokenizer Component', function() { />); results = simulateTokenInput(component, 'john'); - var entry = component.refs.typeahead.refs.entry; + var entry = component._typeahead._entry; TestUtils.Simulate.keyDown(entry, { keyCode: Keyevent.DOM_VK_DOWN }); TestUtils.Simulate.keyDown(entry, { keyCode: Keyevent.DOM_VK_RETURN }); @@ -243,15 +243,15 @@ describe('TypeaheadTokenizer Component', function() { }); it('focuses the typeahead', function() { - this.sinon.spy(this.component.refs.typeahead, 'focus'); + this.sinon.spy(this.component._typeahead, 'focus'); this.component.focus(); - assert.equal(this.component.refs.typeahead.focus.calledOnce, true); + assert.equal(this.component._typeahead.focus.calledOnce, true); }); }); it('should provide an exposed component function to get the selected tokens', function() { simulateTokenInput(this.component, 'o'); - var entry = this.component.refs.typeahead.refs.entry; + var entry = this.component._typeahead._entry; TestUtils.Simulate.keyDown(entry, { keyCode: Keyevent.DOM_VK_DOWN }); TestUtils.Simulate.keyDown(entry, { keyCode: Keyevent.DOM_VK_RETURN }); @@ -263,7 +263,7 @@ describe('TypeaheadTokenizer Component', function() { it('down arrow + return creates a token', function() { var results = simulateTokenInput(this.component, 'o'); var secondItem = ReactDOM.findDOMNode(results[1]).innerText; - var node = this.component.refs.typeahead.refs.entry; + var node = this.component._typeahead._entry; TestUtils.Simulate.keyDown(node, { keyCode: Keyevent.DOM_VK_DOWN }); TestUtils.Simulate.keyDown(node, { keyCode: Keyevent.DOM_VK_DOWN }); TestUtils.Simulate.keyDown(node, { keyCode: Keyevent.DOM_VK_RETURN }); @@ -274,7 +274,7 @@ describe('TypeaheadTokenizer Component', function() { it('up arrow + return navigates and creates a token', function() { var results = simulateTokenInput(this.component, 'o'); var firstItem = ReactDOM.findDOMNode(results[0]).innerText; - var node = this.component.refs.typeahead.refs.entry; + var node = this.component._typeahead._entry; TestUtils.Simulate.keyDown(node, { keyCode: Keyevent.DOM_VK_DOWN }); TestUtils.Simulate.keyDown(node, { keyCode: Keyevent.DOM_VK_DOWN }); TestUtils.Simulate.keyDown(node, { keyCode: Keyevent.DOM_VK_UP }); @@ -286,7 +286,7 @@ describe('TypeaheadTokenizer Component', function() { it('should remove a token when BKSPC is pressed on an empty input', function() { // Select two items simulateTokenInput(this.component, 'o'); - var entry = this.component.refs.typeahead.refs.entry; + var entry = this.component._typeahead._entry; TestUtils.Simulate.keyDown(entry, { keyCode: Keyevent.DOM_VK_DOWN }); TestUtils.Simulate.keyDown(entry, { keyCode: Keyevent.DOM_VK_RETURN }); @@ -309,7 +309,7 @@ describe('TypeaheadTokenizer Component', function() { }); it('should not remove a token on BKSPC when input is not empty', function() { - var input = this.component.refs.typeahead.refs.entry; + var input = this.component._typeahead._entry; var startLength = getTokens(this.component).length; input.value = "hello"; @@ -323,7 +323,7 @@ describe('TypeaheadTokenizer Component', function() { it('tab to choose first item', function() { var results = simulateTokenInput(this.component, 'o'); var itemText = ReactDOM.findDOMNode(results[0]).innerText; - var node = this.component.refs.typeahead.refs.entry; + var node = this.component._typeahead._entry; var tokens = getTokens(this.component); // Need to check Token list for props.children @@ -337,7 +337,7 @@ describe('TypeaheadTokenizer Component', function() { it('tab to selected current item', function() { var results = simulateTokenInput(this.component, 'o'); var itemText = ReactDOM.findDOMNode(results[1]).innerText; - var node = this.component.refs.typeahead.refs.entry; + var node = this.component._typeahead._entry; TestUtils.Simulate.keyDown(node, { keyCode: Keyevent.DOM_VK_DOWN }); TestUtils.Simulate.keyDown(node, { keyCode: Keyevent.DOM_VK_DOWN }); TestUtils.Simulate.keyDown(node, { keyCode: Keyevent.DOM_VK_TAB }); @@ -405,7 +405,7 @@ describe('TypeaheadTokenizer Component', function() { it('should allow selection of custom token', function() { var results = simulateTokenInput(this.component, "abzz"); - var input = this.component.refs.typeahead.refs.entry; + var input = this.component._typeahead._entry; var tokens = getTokens(this.component); TestUtils.Simulate.keyDown(input, {keyCode: Keyevent.DOM_VK_DOWN}) @@ -417,7 +417,7 @@ describe('TypeaheadTokenizer Component', function() { it('should call onTokenAdd for custom token', function() { var results = simulateTokenInput(this.component, "abzz"); - var input = this.component.refs.typeahead.refs.entry; + var input = this.component._typeahead._entry; var tokens = getTokens(this.component); TestUtils.Simulate.keyDown(input, {keyCode: Keyevent.DOM_VK_DOWN}) @@ -429,7 +429,7 @@ describe('TypeaheadTokenizer Component', function() { it('should call onTokenRemove for custom token', function() { var results = simulateTokenInput(this.component, "abzz"); - var input = this.component.refs.typeahead.refs.entry; + var input = this.component._typeahead._entry; var tokens = getTokens(this.component); TestUtils.Simulate.keyDown(input, {keyCode: Keyevent.DOM_VK_DOWN}) @@ -447,7 +447,7 @@ describe('TypeaheadTokenizer Component', function() { it('should not return undefined for a custom token when not selected', function() { var results = simulateTokenInput(this.component, "abzz"); - var input = this.component.refs.typeahead.refs.entry; + var input = this.component._typeahead._entry; var tokens = getTokens(this.component); TestUtils.Simulate.keyDown(input, {keyCode: Keyevent.DOM_VK_TAB}) @@ -460,7 +460,7 @@ describe('TypeaheadTokenizer Component', function() { it('should not select value for a custom token when too short', function() { var results = simulateTokenInput(this.component, "abz"); - var input = this.component.refs.typeahead.refs.entry; + var input = this.component._typeahead._entry; var tokens = getTokens(this.component); TestUtils.Simulate.keyDown(input, {keyCode: Keyevent.DOM_VK_TAB}) @@ -479,7 +479,7 @@ describe('TypeaheadTokenizer Component', function() { />); assert.notOk(ReactDOM.findDOMNode(component).classList.contains("tokenizer-typeahead")); - assert.equal(false, component.refs.typeahead.props.defaultClassNames); + assert.equal(false, component._typeahead.props.defaultClassNames); }); }); }); diff --git a/test/typeahead-test.js b/test/typeahead-test.js index b01bacec..d52343a6 100644 --- a/test/typeahead-test.js +++ b/test/typeahead-test.js @@ -10,7 +10,7 @@ var Keyevent = require('../src/keyevent'); var TestUtils = require('react-addons-test-utils'); function simulateTextInput(component, value) { - var node = component.refs.entry; + var node = component._entry; node.value = value; TestUtils.Simulate.change(node); return TestUtils.scryRenderedComponentsWithType(component, TypeaheadOption); @@ -75,7 +75,7 @@ describe('Typeahead Component', function() { it('down arrow + return selects an option', function() { var results = simulateTextInput(this.component, 'o'); var secondItem = ReactDOM.findDOMNode(results[1]).innerText; - var node = this.component.refs.entry; + var node = this.component._entry; TestUtils.Simulate.keyDown(node, { keyCode: Keyevent.DOM_VK_DOWN }); TestUtils.Simulate.keyDown(node, { keyCode: Keyevent.DOM_VK_DOWN }); TestUtils.Simulate.keyDown(node, { keyCode: Keyevent.DOM_VK_RETURN }); @@ -85,7 +85,7 @@ describe('Typeahead Component', function() { it('up arrow + return navigates and selects an option', function() { var results = simulateTextInput(this.component, 'o'); var firstItem = ReactDOM.findDOMNode(results[0]).innerText; - var node = this.component.refs.entry; + var node = this.component._entry; TestUtils.Simulate.keyDown(node, { keyCode: Keyevent.DOM_VK_DOWN }); TestUtils.Simulate.keyDown(node, { keyCode: Keyevent.DOM_VK_DOWN }); TestUtils.Simulate.keyDown(node, { keyCode: Keyevent.DOM_VK_UP }); @@ -96,7 +96,7 @@ describe('Typeahead Component', function() { it('escape clears selection', function() { var results = simulateTextInput(this.component, 'o'); var firstItem = ReactDOM.findDOMNode(results[0]); - var node = this.component.refs.entry; + var node = this.component._entry; TestUtils.Simulate.keyDown(node, { keyCode: Keyevent.DOM_VK_DOWN }); assert.ok(firstItem.classList.contains('hover')); TestUtils.Simulate.keyDown(node, { keyCode: Keyevent.DOM_VK_ESCAPE }); @@ -106,7 +106,7 @@ describe('Typeahead Component', function() { it('tab to choose first item', function() { var results = simulateTextInput(this.component, 'o'); var itemText = ReactDOM.findDOMNode(results[0]).innerText; - var node = this.component.refs.entry; + var node = this.component._entry; TestUtils.Simulate.keyDown(node, { keyCode: Keyevent.DOM_VK_TAB }); assert.equal(node.value, itemText); }); @@ -114,7 +114,7 @@ describe('Typeahead Component', function() { it('tab to selected current item', function() { var results = simulateTextInput(this.component, 'o'); var itemText = ReactDOM.findDOMNode(results[1]).innerText; - var node = this.component.refs.entry; + var node = this.component._entry; TestUtils.Simulate.keyDown(node, { keyCode: Keyevent.DOM_VK_DOWN }); TestUtils.Simulate.keyDown(node, { keyCode: Keyevent.DOM_VK_DOWN }); TestUtils.Simulate.keyDown(node, { keyCode: Keyevent.DOM_VK_TAB }); @@ -124,14 +124,14 @@ describe('Typeahead Component', function() { it('tab on no selection should not be undefined', function() { var results = simulateTextInput(this.component, 'oz'); assert(results.length == 0); - var node = this.component.refs.entry; + var node = this.component._entry; TestUtils.Simulate.keyDown(node, { keyCode: Keyevent.DOM_VK_TAB }); assert.equal("oz", node.value); }); it('should set hover', function() { var results = simulateTextInput(this.component, 'o'); - var node = this.component.refs.entry; + var node = this.component._entry; TestUtils.Simulate.keyDown(node, { keyCode: Keyevent.DOM_VK_DOWN }); TestUtils.Simulate.keyDown(node, { keyCode: Keyevent.DOM_VK_DOWN }); assert.equal(true, results[1].props.hover); @@ -146,7 +146,7 @@ describe('Typeahead Component', function() { this.sinon.restore(); }); it('focuses the typeahead', function() { - var node = ReactDOM.findDOMNode(this.component.refs.entry); + var node = ReactDOM.findDOMNode(this.component._entry); this.sinon.spy(node, 'focus'); this.component.focus(); assert.equal(node.focus.calledOnce, true); @@ -254,7 +254,7 @@ describe('Typeahead Component', function() { />); var results = simulateTextInput(component, 'john'); - var node = component.refs.entry; + var node = component._entry; TestUtils.Simulate.keyDown(node, { keyCode: Keyevent.DOM_VK_TAB }); assert.equal(node.value, 'George'); @@ -278,7 +278,7 @@ describe('Typeahead Component', function() { }) it('should not display custom value if input length is less than entered', function() { - var input = this.component.refs.entry; + var input = this.component._entry; input.value = "zz"; TestUtils.Simulate.change(input); var results = TestUtils.scryRenderedComponentsWithType(this.component, TypeaheadOption); @@ -287,7 +287,7 @@ describe('Typeahead Component', function() { }); it('should display custom value if input exceeds props.allowCustomValues', function() { - var input = this.component.refs.entry; + var input = this.component._entry; input.value = "ZZZ"; TestUtils.Simulate.change(input); var results = TestUtils.scryRenderedComponentsWithType(this.component, TypeaheadOption); @@ -298,7 +298,7 @@ describe('Typeahead Component', function() { it('should call onOptionSelected when selecting from options', function() { var results = simulateTextInput(this.component, 'o'); var firstItem = ReactDOM.findDOMNode(results[0]).innerText; - var node = this.component.refs.entry; + var node = this.component._entry; TestUtils.Simulate.keyDown(node, { keyCode: Keyevent.DOM_VK_DOWN }); TestUtils.Simulate.keyDown(node, { keyCode: Keyevent.DOM_VK_DOWN }); TestUtils.Simulate.keyDown(node, { keyCode: Keyevent.DOM_VK_UP }); @@ -309,7 +309,7 @@ describe('Typeahead Component', function() { }) it('should call onOptionSelected when custom value is selected', function() { - var input = this.component.refs.entry; + var input = this.component._entry; input.value = "ZZZ"; TestUtils.Simulate.change(input); TestUtils.Simulate.keyDown(input, { keyCode: Keyevent.DOM_VK_DOWN }); @@ -319,7 +319,7 @@ describe('Typeahead Component', function() { }) it('should add hover prop to customValue', function() { - var input = this.component.refs.entry; + var input = this.component._entry; input.value = "ZZZ"; TestUtils.Simulate.change(input); var results = TestUtils.scryRenderedComponentsWithType(this.component, TypeaheadOption); @@ -350,7 +350,7 @@ describe('Typeahead Component', function() { }); it('adds a custom class to the typeahead input', function() { - var input = this.component.refs.entry; + var input = this.component._entry; assert.isTrue(input.classList.contains('topcoat-text-input')); }); @@ -367,13 +367,13 @@ describe('Typeahead Component', function() { it('adds a custom class to the option anchor tags', function() { var typeaheadOptions = TestUtils.scryRenderedComponentsWithType(this.component, TypeaheadOption); - var listAnchor = typeaheadOptions[1].refs.anchor; + var listAnchor = typeaheadOptions[1]._anchor; assert.isTrue(listAnchor.classList.contains('topcoat-list__link')); }); it('adds a custom class to the list items when active', function() { var typeaheadOptions = TestUtils.scryRenderedComponentsWithType(this.component, TypeaheadOption); - var node = this.component.refs.entry; + var node = this.component._entry; TestUtils.Simulate.keyDown(node, { keyCode: Keyevent.DOM_VK_DOWN }); @@ -403,7 +403,7 @@ describe('Typeahead Component', function() { value={ 'John' } />); - var input = component.refs.entry; + var input = component._entry; assert.equal(input.value, 'John'); }); }); @@ -418,7 +418,7 @@ describe('Typeahead Component', function() { } />); - var input = component.refs.entry; + var input = component._entry; TestUtils.Simulate.keyDown(input, { keyCode: 87 }); }); }); @@ -433,7 +433,7 @@ describe('Typeahead Component', function() { } />); - var input = component.refs.entry; + var input = component._entry; TestUtils.Simulate.keyPress(input, { keyCode: 87 }); }); }); @@ -448,7 +448,7 @@ describe('Typeahead Component', function() { } />); - var input = component.refs.entry; + var input = component._entry; TestUtils.Simulate.keyUp(input, { keyCode: 87 }); }); }); @@ -460,7 +460,7 @@ describe('Typeahead Component', function() { inputProps={{ autoCorrect: 'off' }} />); - var input = component.refs.entry; + var input = component._entry; assert.equal(input.getAttribute('autoCorrect'), 'off'); }); }); @@ -474,7 +474,7 @@ describe('Typeahead Component', function() { simulateTextInput(component, 'o'); assert.notOk(ReactDOM.findDOMNode(component).classList.contains("typeahead")); - assert.notOk(ReactDOM.findDOMNode(component.refs.sel).classList.contains("typeahead-selector")); + assert.notOk(ReactDOM.findDOMNode(component._sel).classList.contains("typeahead-selector")); }); }); @@ -572,7 +572,7 @@ describe('Typeahead Component', function() { />); var results = simulateTextInput(component, 'john'); - var node = component.refs.entry; + var node = component._entry; TestUtils.Simulate.keyDown(node, { keyCode: Keyevent.DOM_VK_DOWN }); TestUtils.Simulate.keyDown(node, { keyCode: Keyevent.DOM_VK_RETURN }); @@ -607,7 +607,7 @@ describe('Typeahead Component', function() { }); it('should show the customListComponent when the input is not empty', function() { - var input = this.component.refs.entry; + var input = this.component._entry; input.value = "o"; TestUtils.Simulate.change(input); var results = TestUtils.scryRenderedComponentsWithType(this.component, this.ListComponent); @@ -615,7 +615,7 @@ describe('Typeahead Component', function() { }); it('should no longer show the customListComponent after an option has been selected', function() { - var input = this.component.refs.entry; + var input = this.component._entry; input.value = "o"; TestUtils.Simulate.change(input); TestUtils.Simulate.keyDown(input, { keyCode: Keyevent.DOM_VK_TAB }); @@ -631,7 +631,7 @@ describe('Typeahead Component', function() { textarea={ true } />); - var input = component.refs.entry; + var input = component._entry; assert.equal(input.tagName.toLowerCase(), 'textarea'); }); @@ -640,7 +640,7 @@ describe('Typeahead Component', function() { options={ BEATLES } />); - var input = component.refs.entry; + var input = component._entry; assert.equal(input.tagName.toLowerCase(), 'input'); }); }); @@ -677,7 +677,7 @@ describe('Typeahead Component', function() { /> ); - TestUtils.Simulate.focus(component.refs.entry); + TestUtils.Simulate.focus(component._entry); var results = TestUtils.scryRenderedComponentsWithType(component, TypeaheadOption); assert.equal(4, results.length); });