import React, { Component } from "react"; import { NavDropdown, MenuItem, FormGroup, InputGroup, Glyphicon } from "react-bootstrap"; import styled from "styled-components"; import { FormattedMessage } from "react-intl"; import { SEARCH_PATH } from "../../../app/routes"; import { ENTER_KEY_CODE } from "../../../app/constants/numeric"; const StyledFormGroup = styled(FormGroup)` margin-bottom: 0px; `; const StyledMenuItem = styled(MenuItem)` padding-top: 10px; padding-bottom: 10px; `; const StyledNavDropdown = styled(NavDropdown)` & > .dropdown-menu { width: 250px; } `; class SearchDropdown extends Component { constructor(props) { super(props); this.state = { searchTerm: "" }; this.handleSearchTermChange = this.handleSearchTermChange.bind(this); this.handleKeyPress = this.handleKeyPress.bind(this); this.setFocusToInput = this.setFocusToInput.bind(this); this.submitSearch = this.submitSearch.bind(this); } setFocusToInput(ev) { this.navSearchInput.focus(); ev.stopPropagation(); ev.nativeEvent.stopImmediatePropagation(); } handleKeyPress(ev) { if (ev.charCode === ENTER_KEY_CODE) { this.submitSearch(); } } handleSearchTermChange(ev) { this.setState({ searchTerm: ev.target.value }); } submitSearch() { window.location = `${SEARCH_PATH}?q=${this.state.searchTerm}`; this.setState({ searchTerm: "" }); } render() { return (   } onClick={this.setFocusToInput} id="search-dropdown" > { this.navSearchInput = el; }} type="text" placeholder="Search" className="form-control" /> ); } } export default SearchDropdown;