Click magnifying glass to focus input field

[Benjamin-rightly]

Hi, we have a challenge with our users clicking the magnifying glass in order to begin inputting to the search field, which causes frustrations to some.
Is it possible to click the magnifying glass to focus the input field when autocomplete is set to true?

[sarahdayan]

Hi @Benjamin-rightly!

We've replicated the same experience as with our InstantSearch library for the sake of consistency, meaning the magnifying glass acts as a submit button. The autocomplete-js library is designed so that the search box is fully controlled, meaning there's no API to directly interact with it (yet).

However, I get your point about the frustarting experience, so let's keep this conversation open to see if this is a recurring problem for others and if it needs to be tackled at the library level.

In the meantime, here are two workarounds:

Replace the magnifying glass button using the DOM API

There's no API to modify the button, but you can still use the DOM API to do it by hand. Here's an example:

const focusButton = document.createElement('button');

focusButton.classList.add('aa-SubmitButton'); // so you can get the same CSS, but you can create a new CSS class with the same styles
focusButton.innerHTML = '<svg  ...>...</svg>';
focusButton.addEventListener('click', () => {
  setTimeout(() => searchInput.focus(), 0);
});

const searchInput = document.querySelector('.aa-Input');
const submitButtonParent = document.querySelector('.aa-Label');
const submitButton = document.querySelector('.aa-SubmitButton');

if (submitButtonParent) {
  submitButtonParent.replaceChild(focusButton, submitButton);
}

Note that if you use Detached Mode you'll have to adapt this code, as the search box gets recreated whenever you open the full screen modal.

Use autocomplete-core

This is a more radical solution, but it provides you full control over the rendering. The autocomplete-core package exposes only the primitives for building the search experience, and lets you render it the way you want, granting you full control over the search box. Here's an example of how to build a custom React renderer.

I don't recommend it going with this solution for your use case. Building custom renderers is recommended when you're building a fully custom experience, but it requires more work. Yet, that's still an option.

[Benjamin-rightly]

Hi @sarahdayan!

Wow thanks a bunch! We will look into your suggestions!