WithSearch mapContextToProps interferes with AutoComplete when extracting additional elements from State

[David_Robbins]

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:

<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..

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

[David_Robbins]

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.

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:

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