How to set default behavior of enter (submit button)

[akeni]

I have asynchronous source being fetched per query change.

The behavior I'm looking for is:

1. Before the latest result set comes back, if the user presses enter I want to search by default what is entered
2. If the results are back, we will search by default active id item

I can't seem to find any documentation for setting behavior like this.

[sarahdayan]

Hey @akeni!

There are two parts to achieveing the behavior you want:

1. Executing custom logic when submitting the form (e.g., navigating to /?q=search${query})
2. Dynamically updating the activeItemId depending on the status to avoid selecting stale items while loading fresh ones

To execute custom logic when submitting the form, you can use the onSubmit option. This lets you implement whatever custom logic you want.

To dynamically update the activeItemId depending on the status, you can use the onStateChange option. This lets you react to status changes and perform custom logic. Since you'll be updating the Autocomplete state from here, make sure to have guards in place—it's easy to trigger infinute loops if you don't.

Here's a starter example you can use and tweak to achieve the desired experience.

[akeni]

hi @sarahdayan

Thanks for your suggestion, I appreciate it! I ended up using a different method to check whether or not we are in between two renders due to asynchronous results.

The issue I found was that due to activeitemID selection, during the process of typing the query, we can come to a state where the previous rendered selection is still active, while the new render has not been executed do to asynchronous source.

My goal was to have a default search /?q=search${query} in between the states/render. To do this, I altered the item attribute to include the query:

{
                    name: searches,
                    url: getBaseURL() + 'search?query=' + encodeURIComponent(searches),\
                    query: query
                }

and then I modified the navigator behavior:

navigator: {
    navigate({itemURL, state, item}) {
           if (state.query !== item.query) {
                  window.location.href = getBaseURL() + 'search?query=' + encodeURIComponent(state.query);
         } else {
                  window.location.href =  getBaseURL() + item.getURL();
}
}

These are just snippets of my code. I have different search items (with links that are completely different) so that is why I needed a default behavior