# WithSearch mapContextToProps interferes with AutoComplete when extracting additional elements from State

**URL:** <https://discuss.elastic.co/t/withsearch-mapcontexttoprops-interferes-with-autocomplete-when-extracting-additional-elements-from-state/298184>\
**Category:** Elastic Search\
**Tags:** elastic-app-search\
**Created:** [February 24, 2022, 3:35pm UTC](https://discuss.elastic.co/t/withsearch-mapcontexttoprops-interferes-with-autocomplete-when-extracting-additional-elements-from-state/298184 "2022-02-24T15:35:31Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![David\_Robbins](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/david_robbins/32/101102_2.png) [@David\_Robbins](https://discuss.elastic.co/u/David_Robbins)\
**Post date:** [February 24, 2022, 3:35pm UTC](https://discuss.elastic.co/t/withsearch-mapcontexttoprops-interferes-with-autocomplete-when-extracting-additional-elements-from-state/298184/1 "2022-02-24T15:35:31Z")

</div>

I've noted that when pulling additional elements from state using WithSearch will result in autocomplete only processing one character at a time. In the example code below I'm extracting searchTerm to pass onto child components such as ExportButton:

```auto
<SearchProvider config={config}>
      <WithSearch mapContextToProps={({ wasSearched, searchTerm }) => ({ wasSearched, searchTerm})}>
        {({ wasSearched, searchTerm}) => {
          return (
            <div className="App">
              <ErrorBoundary>
                <Layout
                  header={
                    <SearchBox autocompleteSuggestions={true} 
                    inputView={({ getAutocomplete, getInputProps, getButtonProps}) => (
                      <>
                        / *******
                          *** PASS THE SEARCH TERM TO A CUSTOM COMPONENT
                       ******** /
                        <ExportButton lastSearch={searchTerm}></ExportButton>
                        / *******
                          *** 
                       ******** /
                        <input
                          {...getButtonProps({
                            "data-custom-attr": "some value"
                          })}
                          style={{
                            marginRight: "10px"
                          }}
                        />
                        <div className="sui-search-box__wrapper">
                          <input
                            {...getInputProps({
                              placeholder: "I am a custom placeholder"
                            })}
                          />
                          {getAutocomplete()}
                        </div>
                      </>
                    )}
                    />
                  }
                  sideContent={
                    <div>
                      {wasSearched && (
                        <Sorting
                          label={"Sort by"}
                          sortOptions={buildSortOptionsFromConfig()}
                        />
                      )}
                      {getFacetFields().map(field => (
                        <Facet key={field} field={field} label={field} />
                      ))}
                    </div>
                  }
                  bodyContent={
                    <Results
                      titleField={getConfig().titleField}
                      urlField={getConfig().urlField}
                      thumbnailField={getConfig().thumbnailField}
                      shouldTrackClickThrough={true}
                      resultView={VaersaView}
                    />
                  }
                  bodyHeader={
                    <React.Fragment>
                      {wasSearched && <PagingInfo />}
                      {wasSearched && <ResultsPerPage />}
                    </React.Fragment>
                  }
                  bodyFooter={<Paging />}
                />
              </ErrorBoundary>
            </div>
          );
        }}
      </WithSearch>
    </SearchProvider>

```

The autocomplete input loses focus after each letter is typed..  
 ![image](https://us1.discourse-cdn.com/elastic/original/3X/7/8/785b0a3226f9ac6b7fc8ac2a52c1bdecb7f68a88.png)

My goal is provide the searchTerm and filters objects to the export button. Thanks in advance.

---

<div class="post-metadata">

**Author:** ![David\_Robbins](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/david_robbins/32/101102_2.png) [@David\_Robbins](https://discuss.elastic.co/u/David_Robbins)\
**Post date:** [February 24, 2022, 4:08pm UTC](https://discuss.elastic.co/t/withsearch-mapcontexttoprops-interferes-with-autocomplete-when-extracting-additional-elements-from-state/298184/2 "2022-02-24T16:08:21Z")

</div>

All rightee then! I'm answering my own question, but hopefully will help others - writing this out acts as my own sounding board.

You need to utilize the HeadlessCore, which provides withSearch. [Here's the reference documentation.](https://github.com/elastic/search-ui/blob/master/ADVANCED.md#build-your-own-component)

So the component itself will be responsible for pulling what it needs from the React context. Just import withSearch to your component, and export the function as shown in the example:

```auto
import React from "react";
import { withSearch } from "@elastic/react-search-ui";

function ClearFilters({ filters, clearFilters }) {
  return (
    <div>
      <button onClick={() => clearFilters()}>
        Clear {filters.length} Filters
      </button>
    </div>
  );
}

export default withSearch(({ filters, clearFilters }) => ({
  filters,
  clearFilters
}))(ClearFilters);

```

Autocomplete input field retains focus. Problem solved 🖖 🖖 🖖

![image](https://us1.discourse-cdn.com/elastic/original/3X/5/1/51e732db5e09a92fb38f626a096aad09e9c72069.png)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [March 24, 2022, 4:09pm UTC](https://discuss.elastic.co/t/withsearch-mapcontexttoprops-interferes-with-autocomplete-when-extracting-additional-elements-from-state/298184/3 "2022-03-24T16:09:10Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.