diff --git a/web/client/components/mapcontrols/search/SearchBar.jsx b/web/client/components/mapcontrols/search/SearchBar.jsx
index 39558baa9a..5e6eb7ac59 100644
--- a/web/client/components/mapcontrols/search/SearchBar.jsx
+++ b/web/client/components/mapcontrols/search/SearchBar.jsx
@@ -57,14 +57,8 @@ let SearchBar = React.createClass({
searchText: ""
};
},
- getInitialState() {
- return {
- searchText: this.props.searchText || ""
- };
- },
onChange() {
var text = this.refs.input.getValue();
- this.setState({searchText: text});
this.props.onSearchTextChange(text);
if (this.props.typeAhead) {
delay(() => {this.search(); }, this.props.delay);
@@ -89,7 +83,7 @@ let SearchBar = React.createClass({
render() {
// const innerGlyphicon = ;
const remove = ;
- var showRemove = this.state.searchText !== "";
+ var showRemove = this.props.searchText !== "";
let placeholder;
if (!this.props.placeholder && this.context.messages) {
let placeholderLocMessage = LocaleUtils.getMessageById(this.context.messages, this.props.placeholderMsgId);
@@ -108,7 +102,7 @@ let SearchBar = React.createClass({
style={{
textOverflow: "ellipsis"
}}
- value={this.state.searchText}
+ value={this.props.searchText}
ref="input"
addonAfter={showRemove ? remove : }
onKeyDown={this.onKeyDown}
@@ -122,16 +116,13 @@ let SearchBar = React.createClass({
var text = this.refs.input.getValue();
if (text === undefined || text === "") {
this.props.onSearchReset();
- this.setState({searchText: text });
} else {
this.props.onSearch(text);
- this.setState({searchText: text });
}
},
clearSearch() {
- this.setState({ searchText: ""});
this.props.onSearchReset();
}
});
diff --git a/web/client/components/mapcontrols/search/__tests__/SearchBar-test.jsx b/web/client/components/mapcontrols/search/__tests__/SearchBar-test.jsx
index 4ecefa007a..5b40f33907 100644
--- a/web/client/components/mapcontrols/search/__tests__/SearchBar-test.jsx
+++ b/web/client/components/mapcontrols/search/__tests__/SearchBar-test.jsx
@@ -30,14 +30,16 @@ describe("test the SearchBar", () => {
it('test search and reset on enter', () => {
var TestUtils = React.addons.TestUtils;
+ var tb;
const testHandlers = {
- onSearchHandler: (text) => {return text; },
- onSearchResetHandler: () => {}
+ onSearchHandler: (text) => { return text; },
+ onSearchResetHandler: () => {},
+ onSearchTextChangeHandler: (text) => { tb.setProps({searchText: text}); }
};
const spy = expect.spyOn(testHandlers, 'onSearchHandler');
const spyReset = expect.spyOn(testHandlers, 'onSearchResetHandler');
- var tb = ReactDOM.render(, document.getElementById("container"));
+ tb = ReactDOM.render(, document.getElementById("container"));
let input = ReactDOM.findDOMNode(TestUtils.scryRenderedDOMComponentsWithTag(tb, "input")[0]);
expect(input).toExist();
@@ -53,13 +55,16 @@ describe("test the SearchBar", () => {
it('test search and reset buttons', () => {
var TestUtils = React.addons.TestUtils;
+ var tb;
const testHandlers = {
- onSearchHandler: (text) => {return text; },
- onSearchResetHandler: () => {}
+ onSearchHandler: (text) => { return text; },
+ onSearchResetHandler: () => { tb.setProps({searchText: ""}); },
+ onSearchTextChangeHandler: (text) => { tb.setProps({searchText: text}); }
};
const spyReset = expect.spyOn(testHandlers, 'onSearchResetHandler');
- var tb = ReactDOM.render(, document.getElementById("container"));
+ spyReset.andCallThrough();
+ tb = ReactDOM.render(, document.getElementById("container"));
let input = ReactDOM.findDOMNode(TestUtils.scryRenderedDOMComponentsWithTag(tb, "input")[0]);
// test reset button
expect(input).toExist();
@@ -75,11 +80,13 @@ describe("test the SearchBar", () => {
it('test typeahead', (done) => {
var TestUtils = React.addons.TestUtils;
+ var tb;
const testHandlers = {
- onSearchHandler: (text) => {return text; }
+ onSearchHandler: (text) => {return text; },
+ onSearchTextChangeHandler: (text) => { tb.setProps({searchText: text}); }
};
const spy = expect.spyOn(testHandlers, 'onSearchHandler');
- var tb = ReactDOM.render(, document.getElementById("container"));
+ tb = ReactDOM.render(, document.getElementById("container"));
let input = ReactDOM.findDOMNode(TestUtils.scryRenderedDOMComponentsWithTag(tb, "input")[0]);
expect(input).toExist();