Registering AutocompleteClicks on Elastic App search with autocomplete search-ui

[mahimahi (mahima)]

Hi @elastic_team
I am using search-ui with Elastic App search and trying to record autocomplete clicks. My Search component is built in such a way that in my view component, I am mapping through results and displaying them in my custom view inside the dropdown like this -

<SearchProvider config={config}>
        <WithSearch mapContextToProps={(context) => context}>
          {(context) => {
            return (
              <Layout
                header={
                  <SearchBox
                    autocompleteResults={{
                      shouldTrackClickThrough: true,
                    }}
                    useAutocomplete
                    isOpen={true}
                    allAutocompletedItemsCount
                    debounceLength={3}
                    autocompleteView={({ autocompletedResults }) => {
                      return (
                        <MyCustomResultsComponent
                          results={autocompletedResults}
                          searchTerm={context.searchTerm}
                          shouldTrackClickThrough={true}
                        />
                      );
                    }}
                    inputView={({ getAutocomplete, getInputProps }) => {
                      return (
                          <CustomInputComponent
                            autoFocus
                            {...getInputProps({
                              placeholder: 'Search',
                            })}
                          />
                          {getAutocomplete()}
                      );
                    }}
                  />
                }
              />
            );
          }}
        </WithSearch>
      </SearchProvider>

My CustomResultsComponent has an anchor tag that directs the click to another path depending on the id of the result clicked.

I am unable to register the clicks through autocomplete. I am looking at a few props on the github repo and narrowed down the necessary props to onAutocompleteResultsClick (config function) and trackAutocompleteClickThrough. I am unsure how exactly these will work in my use case. I I can be pointed in the right direction, that'll be super helpful.
Thanks

[JasonStoltz (Jason Stoltzfus)]

Hey @mahimahi,

When creating custom views, I think the best starting place it to look at the existing views, and adapt that view as needed.

One thing you'll see in the default view is the use of this getItemProps method.

I realize it's not totally clear what that's used for, but I do believe that is what is going to ultimately apply an "onClick" handler to your links that will ultimately log your click event.

Try that first, if that doesn't work, you can actually access the trackAutocompleteClickThrough action directly through WithSearch above, and wire up the click event yourself.

Hope that helps.

[mahimahi (mahima)]

Jason, Thank you for getting back so quickly!
getItemProps worked wonderfully in my custom component.