diff --git a/src/SearchInput/SearchInput.Component.js b/src/SearchInput/SearchInput.Component.js
index 6f166c631..9cbfd726a 100644
--- a/src/SearchInput/SearchInput.Component.js
+++ b/src/SearchInput/SearchInput.Component.js
@@ -3,144 +3,70 @@ import { DocsTile, DocsText, Separator, Header, Description, Import, Properties
 import { SearchInput } from './SearchInput';
 
 export class SearchInputComponent extends Component {
-    data = [
-        'Apple',
-        'Apricot',
-        'Avocado',
-        'Abiu',
-        'Acai',
-        'Acerola',
-        'Ackee',
-        'Arhat',
-        'American Mayapple',
-        'African Cherry Orange',
-        'Amazon grape',
-        'Araza',
-        'Alligator apple',
-        'Ambarella',
-        'African Cucumber',
-        'African Medlar',
-        'African Moringa',
-        'Agave Plant',
-        'Aizen Fruit',
-        'American Black Elderberry',
-        'American Chestnut',
-        'American Hazelnut Shrub',
-        'American Red Raspberry',
-        'Aprium',
-        'Atemoya',
-        'Atherton Raspberry Banana',
-        'Berry',
-        'Bayberry',
-        'Blueberry',
-        'Blackberry',
-        'Boysenberry',
-        'Bearberry',
-        'Bilberry',
-        'Barberry',
-        'Buffaloberry',
-        'Black cherry',
-        'Beach plum',
-        'Black raspberry',
-        'Black apple',
-        'Blue tongue',
-        'Bolwarra',
-        'Burdekin plum',
-        'Bramble',
-        'Broadleaf Bramble',
-        'Black mulberry',
-        'Blood orange',
-        'Babaco',
-        'Bael',
-        'Barbadine',
-        'Barbados cherry',
-        'Betel nut',
-        'Bilimbi',
-        'Bitter gourd',
-        'Black sapote',
-        'Bottle gourd',
-        'Brazil nut',
-        'Breadfruit',
-        'Burmese grape',
-        'Blackcurrant',
-        'Bignay',
-        'Beechnut',
-        'Bacuri Fruit',
-        'Balsam Apple',
-        'Batuan Fruit',
-        'Blood Lime',
-        'Brazilian Guava',
-        'Brush cherry Cantaloupe',
-        'Chokeberry',
-        'Cranberry',
-        'Cloudberry',
-        'Crowberry',
-        'Conkerberry',
-        'Calabash',
-        'Calamansi',
-        'Calamondins',
-        'Canistel',
-        'Cape Gooseberry',
-        'Capuli Cherry',
-        'Carob Fruit',
-        'Cashew Apple',
-        'Cedar Bay Cherry',
-        'Cempedak',
-        'Ceylon Gooseberry',
-        'Charichuelo Fruit',
-        'Chayote Fruit',
-        'Cherimoya Fruit',
-        'cherry Fruit',
-        'Chokecherry',
-        'Citrofortunella',
-        'Clementines',
-        'Cluster Fig',
-        'Coco Plum',
-        'Common Apple Berry',
-        'Cornelian Cherry',
-        'Cucumber',
-        'Cupuacu'
+    searchData = [
+        { text: 'apple', callback: () => alert('apple') },
+        { text: 'apricot', callback: () => alert('apricot') },
+        { text: 'banana', callback: () => alert('banana') },
+        { text: 'blueberry', callback: () => alert('blueberry') },
+        { text: 'blackberry', callback: () => alert('blackberry') },
+        { text: 'calabash', callback: () => alert('calabash') },
+        { text: 'clementines', callback: () => alert('clementines') },
+        { text: 'kiwi', callback: () => alert('kiwi') },
+        { text: 'orange', callback: () => alert('orange') }
     ];
 
     constructor(props) {
         super(props);
-
         this.state = {
-            data: []
+            inputValue: ''
         };
     }
 
-    searchInputCode = `<SearchInput
-  placeHolder="Enter a fruit"
-  onSearch={this.performSearch}
-/>`;
-
-    autoCompleteSearchInputCode = `<SearchInput
-  placeHolder="Enter a fruit"
-  data={this.state.data}
-  onAutoComplete={this.performAutoComplete}
-  onSearch={this.performSearch}
-/>`;
-
-    exampleAutoCompleteMethod = `performAutoComplete = searchTerm => {
-  const searchResults = this.data.filter(item => {
-    return item.toLowerCase().startsWith(searchTerm.toLowerCase());
-  });
-
-  this.setState({ data: searchResults });
-};`;
-
-    performAutoComplete = searchTerm => {
-        const searchResults = this.data.filter(item => {
-            return item.toLowerCase().startsWith(searchTerm.toLowerCase());
+    getInputValue(value) {
+        this.setState({
+            inputValue: value
         });
 
-        this.setState({ data: searchResults });
-    };
+        setTimeout(
+            function() {
+                alert('You just set the inputValue of the state to ' + this.state.inputValue);
+            }.bind(this),
+            100
+        );
+    }
+
+    searchInputCode = `<SearchInput
+    placeholder='Enter a fruit'
+    searchList={this.searchData}
+    onEnter={term => this.getInputValue(term)}
+/>
+
+************************************ Data ************************************
+
+getInputValue(value) {
+    this.setState({
+        inputValue: value
+    });
+
+    setTimeout(
+        function() {
+            alert('You just set the inputValue of the state to ' + this.state.inputValue);
+        }.bind(this),
+        1000
+    );
+}
 
-    performSearch = searchTerm => {
-        console.log(`search fired for ${searchTerm}`);
-    };
+searchData = [
+    { text: 'apple', callback: () => alert('apple') },
+    { text: 'apricot', callback: () => alert('apricot') },
+    { text: 'banana', callback: () => alert('banana') },
+    { text: 'blueberry', callback: () => alert('blueberry') },
+    { text: 'blackberry', callback: () => alert('blackberry') },
+    { text: 'calabash', callback: () => alert('calabash') },
+    { text: 'clementines', callback: () => alert('clementines') },
+    { text: 'kiwi', callback: () => alert('kiwi') },
+    { text: 'orange', callback: () => alert('orange') }
+];`;
 
     render() {
         return (
@@ -155,67 +81,30 @@ export class SearchInputComponent extends Component {
                     type='Inputs'
                     properties={[
                         {
-                            name: 'onSearch',
-                            description:
-                                'func (Required) - Method to execute on click of Search icon, selection of auto-complete item or by pressing the Enter key.'
-                        },
-                        {
-                            name: 'placeHolder',
+                            name: 'placeholder',
                             description: 'string - The text to use as placeholder when no text is entered.'
                         },
                         {
-                            name: 'data',
+                            name: 'searchList',
                             description: 'array - Collection of items to display in auto-complete list.'
                         },
                         {
-                            name: 'onAutoComplete',
-                            description:
-                                'func - Method that receives search input box text, to perform auto complete query.'
+                            name: 'onEnter',
+                            description: 'func - Method to execute by pressing the Enter key.'
                         }
                     ]} />
 
                 <Separator />
 
-                <h2>Default Search</h2>
-                <Description>
-                    A text input with Search button. Clicking on the Search button or pressing the Enter key will
-                    execute the onSearch method.
-                </Description>
-                <DocsTile>
-                    <div>
-                        <SearchInput placeHolder='Enter a fruit' onSearch={this.performSearch} />
-                    </div>
-                </DocsTile>
-                <DocsText>{this.searchInputCode}</DocsText>
-
-                <Separator />
-
-                <h2>Auto Complete Search</h2>
-                <Description>
-                    A text input with Search button that includes auto-complete functionality. Clicking on the Search
-                    button, selecting an auto-complete item or pressing the Enter key will execute the onSearch method.{' '}
-                    <br />
-                    <br />
-                    For the auto-complete functionality to work the parent component needs to pass a method to the{' '}
-                    <b>onAutoComplete</b> property. The Search Input component will pass to the onAutoComplete method
-                    the value entered in to the search box. It is up to the parent component to create the array of
-                    values to display and set it to the <b>data</b> property of the Search Input component.
-                </Description>
                 <DocsTile>
                     <div>
                         <SearchInput
-                            placeHolder='Enter a fruit'
-                            data={this.state.data}
-                            onAutoComplete={this.performAutoComplete}
-                            onSearch={this.performSearch} />
+                            placeholder='Enter a fruit'
+                            searchList={this.searchData}
+                            onEnter={term => this.getInputValue(term)} />
                     </div>
                 </DocsTile>
-                <DocsText>{this.autoCompleteSearchInputCode}</DocsText>
-                <Separator />
-                <Description>
-                    Sample auto-complete method which filters an array of fruit based on the search input value.
-                </Description>
-                <DocsText>{this.exampleAutoCompleteMethod}</DocsText>
+                <DocsText>{this.searchInputCode}</DocsText>
 
                 <Separator />
             </div>
diff --git a/src/SearchInput/SearchInput.js b/src/SearchInput/SearchInput.js
index e03c9955e..fc78ad51f 100644
--- a/src/SearchInput/SearchInput.js
+++ b/src/SearchInput/SearchInput.js
@@ -2,158 +2,206 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
 export class SearchInput extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      searchTerm: '',
-      bShowList: false
-    };
-  }
-
-  // fired on change of text input
-  handleSearch = event => {
-    const searchTerm = event.target.value;
-
-    // check if control auto complete
-    if (this.props.onAutoComplete) {
-      if (searchTerm) {
-        this.setState({ searchTerm: searchTerm, bShowList: true });
-      } else {
-        // no search term, remove text from search box and hide list
-        this.setState({ searchTerm: searchTerm, bShowList: false });
-      }
-      this.props.onAutoComplete(searchTerm);
-    } else {
-      this.setState({ searchTerm: searchTerm });
+    constructor(props) {
+        super(props);
+        this.state = {
+            isExpanded: false,
+            searchExpanded: false,
+            value: '',
+            searchList: this.props.searchList,
+            filteredResult: this.props.searchList
+        };
+
+        this.onChangeHandler = this.onChangeHandler.bind(this);
+        this.onClickHandler = this.onClickHandler.bind(this);
+        this.onEscHandler = this.onEscHandler.bind(this);
+        this.onOutsideClickHandler = this.onOutsideClickHandler.bind(this);
+        this.onKeyPressHandler = this.onKeyPressHandler.bind(this);
+        this.listItemClickHandler = this.listItemClickHandler.bind(this);
+        this.onSearchBtnHandler = this.onSearchBtnHandler.bind(this);
+    }
+
+    onKeyPressHandler(event) {
+        if (event.key === 'Enter') {
+            this.props.onEnter(this.state.value);
+        }
     }
-  };
 
-  // fired on list item selection
-  selectTerm = event => {
-    const searchTerm = event.target.innerText;
-    this.setState({ searchTerm: searchTerm, bShowList: false });
+    listItemClickHandler(item) {
+        item.callback();
+    }
 
-    this.props.onSearch(searchTerm);
-  };
+    onChangeHandler(event) {
+        if (this.state.searchList) {
+            let filteredResult = this.state.searchList.filter(item =>
+                item.text.toLowerCase().startsWith(event.target.value.toLowerCase())
+            );
 
-  // check for enter key
-  checkKey = event => {
-    const key = event.key;
+            this.setState({
+                filteredResult: filteredResult
+            });
+        }
 
-    if (key === 'Enter') {
-      if (this.props.data && this.props.data.length > 0) {
-        this.setState(
-          { searchTerm: this.props.data[0], bShowList: false },
-          () => this.props.onSearch(this.state.searchTerm)
-        );
-      } else {
-        this.props.onSearch(this.state.searchTerm);
-      }
+        if (!this.state.isExpanded) {
+            this.setState({
+                isExpanded: true
+            });
+        }
+
+        this.setState({
+            value: event.target.value
+        });
+    }
+
+    onClickHandler() {
+        if (!this.state.isExpanded) {
+            document.addEventListener('click', this.onOutsideClickHandler, false);
+        } else {
+            document.removeEventListener('click', this.onOutsideClickHandler, false);
+        }
+
+        this.setState(prevState => ({
+            isExpanded: !prevState.isExpanded
+        }));
+    }
+
+    onSearchBtnHandler() {
+        this.setState(prevState => ({
+            searchExpanded: !prevState.searchExpanded
+        }));
+
+        if (this.state.searchExpanded && this.state.isExpanded) {
+            this.setState({
+                isExpanded: false
+            });
+        }
     }
-  };
-
-  // create search box
-  createSearchInput = onAutoComplete => {
-    let searchInput = (
-        <input
-            type='text'
-            className='fd-input'
-            onChange={this.handleSearch}
-            placeholder={this.props.placeHolder}
-            onKeyPress={this.checkKey} />
-    );
-
-    // include auto complete functionality if onAutoComplete method is passed to component
-    if (onAutoComplete) {
-      searchInput = (
-          <input
-              type='text'
-              className='fd-input'
-              value={this.state.searchTerm}
-              placeholder={this.props.placeHolder}
-              onChange={this.handleSearch}
-              onFocus={this.handleSearch}
-              onKeyPress={this.checkKey}
-              onBlur={() => {
-            this.setState({ bShowList: false });
-          }} />
-      );
+
+    onEscHandler(event) {
+        if ((event.keyCode === 27 && this.state.isExpanded === true) || (event.keyCode === 27 && this.state.searchExpanded === true)) {
+            this.setState({
+                isExpanded: false,
+                searchExpanded: false,
+                value: '',
+                searchList: this.props.searchList,
+                filteredResult: this.props.searchList
+            });
+        }
     }
 
-    return searchInput;
-  };
+    onOutsideClickHandler(e) {
+        e.stopPropagation();
+        if (this.node && !this.node.contains(e.target)) {
+            if (this.state.isExpanded) {
+                this.setState({
+                    isExpanded: false
+                });
 
-  // create auto complete search items
-  createAutoCompleteItems = data => {
-    return data && data.length > 0 ? (
-      data.map((item, index) => {
-        let classNames = 'fd-menu__item';
-        if (index === 0) {
-          classNames += ' is-selected';
+                if (this.props.inShellbar && this.state.searchExpanded && !this.state.value) {
+                    this.setState({
+                        searchExpanded: false
+                    });
+                }
+            } else {
+                return;
+            }
         }
+    }
+
+    componentDidMount() {
+        document.addEventListener('keydown', this.onEscHandler, false);
+        document.addEventListener('click', this.onOutsideClickHandler, false);
+    }
+    componentWillUnmount() {
+        document.removeEventListener('keydown', this.onEscHandler, false);
+        document.removeEventListener('click', this.onOutsideClickHandler, false);
+    }
+
+    render() {
+        const { placeholder, inShellbar, onSearch } = this.props;
+
         return (
-            <li key={index}>
-                <a href='#' className={classNames}
-                    onClick={this.selectTerm}>
-                    {item}
-                </a>
-            </li>
-        );
-      })
-    ) : (
-        <li>
-            <a href='#' className='fd-menu__item'>
-          No results found
-            </a>
-        </li>
-    );
-  };
-
-  render() {
-    const { data, onSearch, onAutoComplete } = this.props;
-
-    return (
-        <div className='fd-search-input'>
-            <div className='fd-popover'>
-                <div className='fd-popover__control'>
-                    <div
-                        className='fd-combobox-control'
-                        aria-label='Image label'
-                        aria-expanded={this.state.bShowList}
-                        aria-haspopup='true'>
-                        <div className='fd-input-group fd-input-group--after'>
-                            {this.createSearchInput(onAutoComplete)}
-                            <span className='fd-input-group__addon fd-input-group__addon--after fd-input-group__addon--button'>
-                                <button
-                                    className='fd-button--light sap-icon--search'
-                                    onClick={() => onSearch(this.state.searchTerm)} />
-                            </span>
+            <div className={`fd-search-input${inShellbar ? ' fd-search-input--closed' : ''}`}>
+                <div className='fd-popover'>
+                    {inShellbar ? (
+                        <div className='fd-popover__control fd-search-input__control'>
+                            <button
+                                className='sap-icon--search fd-button--shell'
+                                onClick={this.onSearchBtnHandler}
+                                aria-expanded={this.state.searchExpanded}
+                                aria-haspopup='true' />
+                            <div className='fd-search-input__closedcontrol' aria-hidden={!this.state.searchExpanded}>
+                                <div
+                                    className='fd-search-input__controlinput'
+                                    aria-expanded={this.state.searchExpanded}
+                                    aria-haspopup='true' >
+                                    <input
+                                        type='text'
+                                        className='fd-input'
+                                        value={this.state.value}
+                                        onChange={this.onChangeHandler}
+                                        placeholder={placeholder}
+                                        onKeyPress={this.onKeyPressHandler}
+                                        onClick={() => this.onClickHandler()}
+                                        ref={node => (this.node = node)} />
+                                </div>
+                            </div>
+                        </div>
+                    ) : (
+                        <div className={'fd-popover__control'}>
+                            <div
+                                className='fd-combobox-control'
+                                aria-expanded={this.state.isExpanded}
+                                aria-haspopup='true' >
+                                <div className='fd-input-group fd-input-group--after'>
+                                    <input
+                                        type='text'
+                                        className='fd-input'
+                                        value={this.state.value}
+                                        onChange={this.onChangeHandler}
+                                        placeholder={placeholder}
+                                        onKeyPress={this.onKeyPressHandler}
+                                        onClick={() => this.onClickHandler()}
+                                        ref={node => (this.node = node)} />
+
+                                    <span className='fd-input-group__addon fd-input-group__addon--after fd-input-group__addon--button'>
+                                        <button className=' fd-button--light sap-icon--search' onClick={onSearch} />
+                                    </span>
+                                </div>
+                            </div>
                         </div>
-                    </div>
+                    )}
+                    {this.state.filteredResult && (
+                        <div
+                            className='fd-popover__body fd-popover__body--no-arrow'
+                            aria-hidden={!this.state.isExpanded} >
+                            <div className={inShellbar ? 'fd-search-input__body' : ''}>
+                                <nav className='fd-menu'>
+                                    <ul className='fd-menu__list'>
+                                        {this.state.filteredResult.length > 0 ? (
+                                            this.state.filteredResult.map((item, index) => {
+                                                return (
+                                                    <li
+                                                        key={index}
+                                                        className='fd-menu__item'
+                                                        onClick={() => this.listItemClickHandler(item)} >
+                                                        <strong>{this.state.value}</strong>
+                                                        {this.state.value && this.state.value.length
+                                                            ? item.text.substring(this.state.value.length)
+                                                            : item.text}
+                                                    </li>
+                                                );
+                                            })
+                                        ) : (
+                                            <li className='fd-menu__item'>No result</li>
+                                        )}
+                                    </ul>
+                                </nav>
+                            </div>
+                        </div>
+                    )}
                 </div>
-                {data && onAutoComplete ? (
-                    <div
-                        className='fd-popover__body fd-popover__body--no-arrow'
-                        aria-hidden={!this.state.bShowList}>
-                        <nav className='fd-menu'>
-                            <ul className='fd-menu__list'>
-                                {this.createAutoCompleteItems(data)}
-                            </ul>
-                        </nav>
-                    </div>
-          ) : (
-            ''
-          )}
             </div>
-        </div>
-    );
-  }
+        );
+    }
 }
-
-SearchInput.propTypes = {
-  onSearch: PropTypes.func.isRequired,
-  data: PropTypes.array,
-  placeHolder: PropTypes.string,
-  onAutoComplete: PropTypes.func
-};
diff --git a/src/SearchInput/SearchInput.test.js b/src/SearchInput/SearchInput.test.js
deleted file mode 100644
index 24696a010..000000000
--- a/src/SearchInput/SearchInput.test.js
+++ /dev/null
@@ -1,208 +0,0 @@
-import React from 'react';
-import renderer from 'react-test-renderer';
-import { SearchInput } from './SearchInput';
-import Enzyme, { shallow } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
-
-Enzyme.configure({ adapter: new Adapter() });
-
-describe('<SearchInput />', () => {
-  const mockOnSearch = jest.fn();
-  const mockOnAutoComplete = jest.fn();
-  const data = ['apple', 'banana', 'orange'];
-  const defaultSearchInput = (
-      <SearchInput placeHolder='Hello there' onSearch={mockOnSearch} />
-  );
-  const autoCompleteSearchInput = (
-      <SearchInput
-          placeHolder='Hello there'
-          onAutoComplete={mockOnAutoComplete}
-          data={data}
-          onSearch={mockOnSearch} />
-  );
-  const autoCompleteNoDataSearchInput = (
-      <SearchInput
-          placeHolder='Hello there'
-          data={[]}
-          onAutoComplete={mockOnAutoComplete}
-          onSearch={mockOnSearch} />
-  );
-  const searchInput = 'input[type="text"].fd-input';
-
-  const getListStatus = (wrapper, bIsShown) => {
-    const combobox = wrapper.find(
-      `div.fd-combobox-control[aria-expanded=${bIsShown}]`
-    );
-
-    const popover = wrapper.find(
-      `div.fd-popover__body.fd-popover__body--no-arrow[aria-hidden=${!bIsShown}]`
-    );
-
-    return { combobox: combobox, popover: popover };
-  };
-
-  // create default search input component
-  test('create basic Search input', () => {
-    const component = renderer.create(defaultSearchInput);
-    let tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  test('check for enter key press on basic search input', () => {
-    const wrapper = shallow(defaultSearchInput);
-
-    // enter text into search input
-    wrapper
-      .find(searchInput)
-      .simulate('change', { target: { value: data[0] } });
-
-    wrapper
-      .find('input[type="text"].fd-input')
-      .simulate('keypress', { key: 'Enter' });
-
-    expect(wrapper.state(['searchTerm'])).toBe(data[0]);
-  });
-
-  test('create autocomplete Search input with no data', () => {
-    const component = renderer.create(autoCompleteNoDataSearchInput);
-    let tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  // create auto complete search input component
-  test('create auto-complete Search input', () => {
-    const component = renderer.create(autoCompleteSearchInput);
-    let tree = component.toJSON();
-    expect(tree).toMatchSnapshot();
-
-    const wrapper = shallow(autoCompleteSearchInput);
-
-    // check to see if 3 list items are created for auto complete list
-    expect(wrapper.find('li')).toHaveLength(3);
-
-    // check to see if first item is selected in auto complete list
-    expect(wrapper.find('li:first-child a').hasClass('is-selected')).toEqual(
-      true
-    );
-  });
-
-  test('check that auto complete list is hidden', () => {
-    const wrapper = shallow(autoCompleteSearchInput);
-
-    // check if bShowList state is changed
-    expect(wrapper.state(['bShowList'])).toBe(false);
-
-    // check to see if list is not shown
-    let results = getListStatus(wrapper, false);
-    expect(results.combobox).toHaveLength(1);
-    expect(results.popover).toHaveLength(1);
-  });
-
-  test('check that auto complete list is hidden on blur', () => {
-    const wrapper = shallow(autoCompleteSearchInput);
-
-    wrapper
-      .find(searchInput)
-      .simulate('change', { target: { value: data[0] } });
-
-    // check if bShowList state is changed
-    expect(wrapper.state(['bShowList'])).toBe(true);
-
-    // check to see if list is shown
-    let results = getListStatus(wrapper, true);
-    expect(results.combobox).toHaveLength(1);
-    expect(results.popover).toHaveLength(1);
-
-    wrapper.find(searchInput).simulate('blur');
-
-    // check to see if list is not shown
-    results = getListStatus(wrapper, false);
-    expect(results.combobox).toHaveLength(1);
-    expect(results.popover).toHaveLength(1);
-  });
-
-  test('check that auto complete list is shown when text entered', () => {
-    const wrapper = shallow(autoCompleteSearchInput);
-    wrapper
-      .find(searchInput)
-      .simulate('change', { target: { value: data[0] } });
-
-    // check if searchTerm state is updated
-    expect(wrapper.state(['searchTerm'])).toBe(data[0]);
-
-    // check if bShowList state is changed
-    expect(wrapper.state(['bShowList'])).toBe(true);
-
-    // check to see if list is shown
-    let results = getListStatus(wrapper, true);
-    expect(results.combobox).toHaveLength(1);
-    expect(results.popover).toHaveLength(1);
-  });
-
-  test('check that auto complete list is not shown when text removed', () => {
-    const wrapper = shallow(autoCompleteSearchInput);
-    wrapper
-      .find(searchInput)
-      .simulate('change', { target: { value: data[0] } });
-
-    // check if searchTerm state is updated
-    expect(wrapper.state(['searchTerm'])).toBe(data[0]);
-
-    // check if bShowList state is changed
-    expect(wrapper.state(['bShowList'])).toBe(true);
-
-    // check to see if list is shown
-    let results = getListStatus(wrapper, true);
-    expect(results.combobox).toHaveLength(1);
-    expect(results.popover).toHaveLength(1);
-
-    wrapper.find(searchInput).simulate('change', { target: { value: '' } });
-
-    // check if searchTerm state is updated
-    expect(wrapper.state(['searchTerm'])).toBe('');
-
-    // check if bShowList state is changed
-    expect(wrapper.state(['bShowList'])).toBe(false);
-
-    // check to see if list is shown
-    results = getListStatus(wrapper, false);
-    expect(results.combobox).toHaveLength(1);
-    expect(results.popover).toHaveLength(1);
-  });
-
-  test('check for enter key press on auto complete search input', () => {
-    const wrapper = shallow(autoCompleteSearchInput);
-    wrapper.find(searchInput).simulate('keypress', { key: 'Esc' });
-    wrapper.find(searchInput).simulate('keypress', { key: 'Enter' });
-
-    expect(wrapper.state(['searchTerm'])).toBe(data[0]);
-  });
-
-  test('check search executed on search button click', () => {
-    const wrapper = shallow(autoCompleteSearchInput);
-    wrapper
-      .find(searchInput)
-      .simulate('change', { target: { value: data[0] } });
-
-    // check if searchTerm state is updated
-    expect(wrapper.state(['searchTerm'])).toBe(data[0]);
-
-    wrapper.find('.fd-button--light.sap-icon--search').simulate('click');
-
-    expect(wrapper.state(['searchTerm'])).toBe(data[0]);
-  });
-
-  test('set search term on list item selection', () => {
-    const wrapper = shallow(autoCompleteSearchInput);
-    wrapper
-      .find('li a')
-      .at(2)
-      .simulate('click', { target: { innerText: data[2] } });
-
-    // check if searchTerm state is updated
-    expect(wrapper.state(['searchTerm'])).toBe(data[2]);
-
-    // check if bShowList state is changed
-    expect(wrapper.state(['bShowList'])).toBe(false);
-  });
-});
diff --git a/src/SearchInput/__snapshots__/SearchInput.test.js.snap b/src/SearchInput/__snapshots__/SearchInput.test.js.snap
deleted file mode 100644
index 41b1819d6..000000000
--- a/src/SearchInput/__snapshots__/SearchInput.test.js.snap
+++ /dev/null
@@ -1,192 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<SearchInput /> create auto-complete Search input 1`] = `
-<div
-  className="fd-search-input"
->
-  <div
-    className="fd-popover"
-  >
-    <div
-      className="fd-popover__control"
-    >
-      <div
-        aria-expanded={false}
-        aria-haspopup="true"
-        aria-label="Image label"
-        className="fd-combobox-control"
-      >
-        <div
-          className="fd-input-group fd-input-group--after"
-        >
-          <input
-            className="fd-input"
-            onBlur={[Function]}
-            onChange={[Function]}
-            onFocus={[Function]}
-            onKeyPress={[Function]}
-            placeholder="Hello there"
-            type="text"
-            value=""
-          />
-          <span
-            className="fd-input-group__addon fd-input-group__addon--after fd-input-group__addon--button"
-          >
-            <button
-              className="fd-button--light sap-icon--search"
-              onClick={[Function]}
-            />
-          </span>
-        </div>
-      </div>
-    </div>
-    <div
-      aria-hidden={true}
-      className="fd-popover__body fd-popover__body--no-arrow"
-    >
-      <nav
-        className="fd-menu"
-      >
-        <ul
-          className="fd-menu__list"
-        >
-          <li>
-            <a
-              className="fd-menu__item is-selected"
-              href="#"
-              onClick={[Function]}
-            >
-              apple
-            </a>
-          </li>
-          <li>
-            <a
-              className="fd-menu__item"
-              href="#"
-              onClick={[Function]}
-            >
-              banana
-            </a>
-          </li>
-          <li>
-            <a
-              className="fd-menu__item"
-              href="#"
-              onClick={[Function]}
-            >
-              orange
-            </a>
-          </li>
-        </ul>
-      </nav>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<SearchInput /> create autocomplete Search input with no data 1`] = `
-<div
-  className="fd-search-input"
->
-  <div
-    className="fd-popover"
-  >
-    <div
-      className="fd-popover__control"
-    >
-      <div
-        aria-expanded={false}
-        aria-haspopup="true"
-        aria-label="Image label"
-        className="fd-combobox-control"
-      >
-        <div
-          className="fd-input-group fd-input-group--after"
-        >
-          <input
-            className="fd-input"
-            onBlur={[Function]}
-            onChange={[Function]}
-            onFocus={[Function]}
-            onKeyPress={[Function]}
-            placeholder="Hello there"
-            type="text"
-            value=""
-          />
-          <span
-            className="fd-input-group__addon fd-input-group__addon--after fd-input-group__addon--button"
-          >
-            <button
-              className="fd-button--light sap-icon--search"
-              onClick={[Function]}
-            />
-          </span>
-        </div>
-      </div>
-    </div>
-    <div
-      aria-hidden={true}
-      className="fd-popover__body fd-popover__body--no-arrow"
-    >
-      <nav
-        className="fd-menu"
-      >
-        <ul
-          className="fd-menu__list"
-        >
-          <li>
-            <a
-              className="fd-menu__item"
-              href="#"
-            >
-              No results found
-            </a>
-          </li>
-        </ul>
-      </nav>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<SearchInput /> create basic Search input 1`] = `
-<div
-  className="fd-search-input"
->
-  <div
-    className="fd-popover"
-  >
-    <div
-      className="fd-popover__control"
-    >
-      <div
-        aria-expanded={false}
-        aria-haspopup="true"
-        aria-label="Image label"
-        className="fd-combobox-control"
-      >
-        <div
-          className="fd-input-group fd-input-group--after"
-        >
-          <input
-            className="fd-input"
-            onChange={[Function]}
-            onKeyPress={[Function]}
-            placeholder="Hello there"
-            type="text"
-          />
-          <span
-            className="fd-input-group__addon fd-input-group__addon--after fd-input-group__addon--button"
-          >
-            <button
-              className="fd-button--light sap-icon--search"
-              onClick={[Function]}
-            />
-          </span>
-        </div>
-      </div>
-    </div>
-    
-  </div>
-</div>
-`;