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);
});