diff --git a/libs/Component/InputSearch.jsx b/libs/Component/InputSearch.jsx
index dcff480..a80ebbc 100644
--- a/libs/Component/InputSearch.jsx
+++ b/libs/Component/InputSearch.jsx
@@ -1,17 +1,18 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
-import {Overlay, Popover} from 'react-bootstrap';
+import {Overlay, Popover, OverlayTrigger} from 'react-bootstrap';
 import _ from 'lodash';
 
 export default class InputSearch extends Component {
 
-  constructor(props){
+  constructor(props) {
     super(props);
     this.state = {
       showOptions: false,
       inputSearchValue: "",
-      selectedOptions: []
+      selectedOptions: [],
+      inputWidth: 5
     }
   }
 
@@ -22,7 +23,7 @@ export default class InputSearch extends Component {
   }
 
   componentDidMount() {
-    document.addEventListener('click', this.handleOutsideClick, false);
+    // document.addEventListener('click', this.handleOutsideClick, false);
   }
 
   componentWillUnmount() {
@@ -53,22 +54,22 @@ export default class InputSearch extends Component {
   }
 
   onInputFocus = () => {
-    this.setState({
-      showOptions: true
-    })
+    // this.setState({showOptions: true})
   }
 
   onInputKeyDown = (e) => {
-    if(e.which === 8 && e.target.value === "" && this.context.visualSearch.state.selectedValue.length > 0){
+    if (e.which === 8 && e.target.value === "" && this.context.visualSearch.state.selectedValue.length > 0) {
       this.props.onBackspaceRemove();
     }
   }
 
-  onValueSearch = (e) => {
+  handleInputChange = (e) => {
     if (this.context.visualSearch.props.filterOptions) {
       let value = e.target.value;
+      let width = value.length;
       this.setState({
-        inputSearchValue: value
+        inputSearchValue: value,
+        inputWidth: width * 8
       })
     }
   }
@@ -103,8 +104,9 @@ export default class InputSearch extends Component {
 
   renderOptions = () => {
     let selectedOptions = this.getSelectedOptions();
+    let options = [];
     if (selectedOptions.length > 0) {
-      return selectedOptions.map((option, i) => {
+      options = selectedOptions.map((option, i) => {
         let optionClass = "option";
         if (this.context.visualSearch.props.removeOnSelect === false) {
           let opt = _.find(this.context.visualSearch.state.selectedValue, {name: option.name});
@@ -112,49 +114,35 @@ export default class InputSearch extends Component {
             optionClass += " selected";
           }
         }
-        return (
-          <span key={i} className={optionClass} onClick={()=>{this.onOptionClick(option)}}>{option.label}</span>
-        )
+        return (<span key={i} className={optionClass} onClick={() => {
+            this.onOptionClick(option)
+          }}>{option.label}</span>)
       })
     } else {
-      return (<span className="option">No Record's Found !!!</span>)
+      options = (<span className="option">No Record's Found !!!</span>)
     }
+    return (<Popover id="visual_search_option_list">
+      <div className="options_wrapper">
+        {options}
+      </div>
+    </Popover>)
   }
 
   onOptionClick = (option) => {
     this.props.onOptionClick(option);
-    this.setState({
-      showOptions: false,
-      inputSearchValue: ""
-    })
+    this.refs.search_input.click();
+    this.setState({showOptions: false, inputSearchValue: ""})
   }
 
-  render(){
-    return([
-      <input className="search_input" key="search_input" onFocus={this.onInputFocus} value={this.state.inputSearchValue} onChange={this.onValueSearch} onKeyDown={this.onInputKeyDown} onKeyPress={this.onInputKeyPress}/>,
-        this.state.showOptions ?
-        <Overlay
-          key="overlay"
-          show={this.state.showOptions}
-          target={() => ReactDOM.findDOMNode(this.context.visualSearch.searchTarget)}
-          placement="bottom"
-          container={this.context.visualSearch}
-          >
-          <Popover id="visual_search_option_list">
-            <div className="options_wrapper">
-              {
-                this.renderOptions()
-              }
-            </div>
-          </Popover>
-        </Overlay>
-        :null
-      ]
-    )
+  render() {
+    return (<OverlayTrigger trigger={["click"]} positionLeft="30px" placement="bottom" overlay={this.renderOptions()}>
+      <input className="search_input" ref="search_input" value={this.state.inputSearchValue} style={{
+          width: (this.state.inputWidth + 'px')
+        }} onChange={this.handleInputChange} onKeyPress={this.onInputKeyPress}></input>
+    </OverlayTrigger>)
   }
 }
 
-
 InputSearch.contextTypes = {
   visualSearch: PropTypes.object
 }
diff --git a/libs/Component/VisualSearch.jsx b/libs/Component/VisualSearch.jsx
index c526995..cb31795 100644
--- a/libs/Component/VisualSearch.jsx
+++ b/libs/Component/VisualSearch.jsx
@@ -1,4 +1,4 @@
-import React,{Component} from 'react';
+import React, {Component} from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import _ from 'lodash';
@@ -9,7 +9,7 @@ import SearchComponent from './SearchComponent';
 
 export default class VisualSearch extends Component {
 
-  constructor(props){
+  constructor(props) {
     super(props);
     this.state = {
       selectedValue: []
@@ -31,40 +31,36 @@ export default class VisualSearch extends Component {
   }
 
   getChildContext = () => {
-    return {
-      visualSearch: this
-    }
+    return {visualSearch: this}
   }
 
   onOptionClick = (option) => {
     let selectedValue = this.state.selectedValue;
     let value = _.clone(option);
     selectedValue.push(value);
-    this.setState({
-      selectedValue: selectedValue
-    })
+    this.setState({selectedValue: selectedValue})
   }
 
   onCancelClick = (index) => {
     let selectedValue = this.state.selectedValue;
-    selectedValue.splice(index,1);
+    selectedValue.splice(index, 1);
     this.inputSearch.setState({showOptions: false});
     this.setState({
       selectedValue: selectedValue
-    },()=>{
+    }, () => {
       this.onUpdateFilter();
     })
   }
 
   onBackspaceRemove = () => {
-    if(this.props.hasOwnProperty("removeOnBackspace") && this.props.removeOnBackspace === true){
+    if (this.props.hasOwnProperty("removeOnBackspace") && this.props.removeOnBackspace === true) {
       let selectedValue = this.state.selectedValue;
-      selectedValue.splice(selectedValue.length - 1,1);
+      selectedValue.splice(selectedValue.length - 1, 1);
       this.inputSearch.setState({showOptions: false});
       this.setState({
         selectedValue: selectedValue
-      },()=>{
-        if(this.state.selectedValue.length === 0){
+      }, () => {
+        if (this.state.selectedValue.length === 0) {
           this.inputSearch.setState({showOptions: true});
         }
         this.onUpdateFilter();
@@ -74,42 +70,38 @@ export default class VisualSearch extends Component {
 
   onUpdateFilter = () => {
     let selectedValue = this.state.selectedValue;
-    let values = selectedValue.map((value)=>{
-      return {
-        name: value.name,
-        value: value.value
-      }
+    let values = selectedValue.map((value) => {
+      return {name: value.name, value: value.value}
     })
     this.props.onFilter(values);
   }
 
-   render() {
-      return (
-         <div className={"visual_search " + (this.props.className ? this.props.className : "")}>
-            <div className="visual_search_wrapper clearfix" ref={(searchTarget)=>{this.searchTarget = searchTarget}}>
-              {
-                this.state.selectedValue.map((value,i)=>{
-                  return (
-                    <SearchComponent data={value} index={i} key={i} onCancelClick={this.onCancelClick}/>
-                  )
-                })
-              }
-              <div className="visual_input_wrapper">
-                <InputSearch
-                  ref={(inputSearch)=>{this.inputSearch = inputSearch}}
-                  onOptionClick= {this.onOptionClick}
-                  onBackspaceRemove= {this.onBackspaceRemove}
-                />
-              </div>
-            </div>
-         </div>
-      );
-   }
+  render() {
+    return (<div className={"visual_search " + (
+        this.props.className
+        ? this.props.className
+        : "")}>
+      <div className="visual_search_wrapper clearfix" ref={(searchTarget) => {
+          this.searchTarget = searchTarget
+        }}>
+        {
+          this.state.selectedValue.map((value, i) => {
+            return (<SearchComponent data={value} index={i} key={i} onCancelClick={this.onCancelClick}/>)
+          })
+        }
+        <div className="visual_input_wrapper">
+          <InputSearch ref={(inputSearch) => {
+              this.inputSearch = inputSearch
+            }} onOptionClick={this.onOptionClick} onBackspaceRemove={this.onBackspaceRemove}/>
+        </div>
+      </div>
+    </div>);
+  }
 }
 
 VisualSearch.defaultProps = {
   removeOnBackspace: false,
-  filterOptions: false,
+  filterOptions: true,
   removeOnSelect: false,
   defaultValue: undefined
 }
diff --git a/libs/css/visual_search.css b/libs/css/visual_search.css
index 43e5084..9390927 100644
--- a/libs/css/visual_search.css
+++ b/libs/css/visual_search.css
@@ -29,32 +29,29 @@
 
 .visual_search .search_input {
   border: none;
-  width: 100%;
   height: 36px;
+  min-width: 5px;
 }
 
 .visual_search .visual_input_wrapper {
-  display: block;
-  overflow: auto;
+  margin-left: 5px;
 }
 
 .visual_search .search_input:focus {
   outline: none;
 }
 
-.visual_search #visual_search_option_list {
+#visual_search_option_list {
   margin-top: 0px;
   border-radius: 0px;
-  left: 0px !important;
   max-width: none;
-  width: 100%;
 }
 
-.visual_search .popover-content {
+#visual_search_option_list .popover-content {
   padding: 0px;
 }
 
-.visual_search .arrow {
+#visual_search_option_list .arrow {
   display: none;
 }
 
@@ -170,4 +167,4 @@
 
 .pickertable tr td.pickerdate {
   cursor: pointer;
-}
\ No newline at end of file
+}