import React from 'react';
import css from './FilterPaneSearch.css';
import Icon from '@folio/stripes-components/lib/Icon';
import Button from '@folio/stripes-components/lib/Button';

class FilterPaneSearch extends React.Component{
  constructor(props){
    super(props);
    this.searchInput = null;
  }

  clearSearchField(){
    this.searchInput.value = '';
    const evt =  new Event('input', {bubbles: true});
    this.searchInput.dispatchEvent(evt);
  }

  onChange() {
    console.log("changed: new value =", this.searchInput.value);
    // XXX We need to somehow feed the changed value into stripes-connect for the parent component
  }
  
  render(){
    return(
      <div className={css.headerSearchContainer}>
        <div style={{alignSelf:"center"}}><Icon icon="search"/></div>
        <input className={css.headerSearchInput} ref={(ref) => this.searchInput = ref} type="text" value = {this.props.value} onChange={this.onChange.bind(this)} placeholder="Search"/>
        <Button className={css.headerSearchClearButton} onClick={this.clearSearchField.bind(this)} ><Icon icon="clearX" iconClassName={css.clearIcon}/></Button>
      </div>
    );
  }
}

export default FilterPaneSearch;


@@ -5,16 +5,31 @@
 rt React
+, %7B PropTypes %7D
  from 'r
@@ -35,16 +35,16 @@
 react';%0A
-
 import c
@@ -240,16 +240,88 @@
 ponent%7B%0A
+  static contextTypes = %7B%0A    router: PropTypes.object.isRequired%0A  %7D;%0A%0A
   constr
@@ -568,37 +568,17 @@
 cons
-ole.log(%22changed: new
+t
  value =
 %22, t
@@ -577,10 +577,8 @@
 ue =
-%22,
  thi
@@ -600,109 +600,66 @@
 alue
-)
 ;%0A    
-// XXX We need to somehow feed the changed value into stripes-connect for the parent component
+this.context.router.transitionTo(%22/users/%22 + value);
 %0A  %7D

Set the URL to include the modified query. Part of STRIPES-85.