Adding autofocus to search bar

Search
1

Hi team,

I’m working with a client who is looking to add autofocus to the search bar element on their site. The context is clicking into the search bar opens a modal and they’d like autofocus applied so that users don’t need to click in the modal. Is this feasible to implement? If so, how would the client do so?

Best,
Josh

2

Hi Josh!

There is an attribute on the search bar called autoFocus, and when set to true, will autofocus the search bar on load.

You can see it working here:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <!-- JS Links -->
    <script src="https://assets.sitescdn.net/answers/v1.6/answerstemplates.compiled.min.js"></script>

    <link
      rel="stylesheet"
      type="text/css"
      href="https://assets.sitescdn.net/answers/v1.6/answers.css"
    />
    <script>
      function initAnswers() {
        ANSWERS.init({
          useTemplates: false,
          templateBundle: TemplateBundle.default,
          apiKey: "3517add824e992916861b76e456724d9",
          experienceKey: "answers-js-docs",
          experienceVersion: "PRODUCTION",
          locale: "en", // e.g. en
          businessId: "3215760",
          onReady: function () {
            ANSWERS.addComponent("SearchBar", {
              container: ".search_form",
              name: "search-bar", //Must be unique for every search bar on the same page
              redirectUrl: "REPLACE_ME_SEARCH_RESULT_URL",
              placeholderText: "Search...",
              autoFocus: true
            });
          }
        });
      }
    </script>
    <script
      src="https://assets.sitescdn.net/answers/v1.6/answers.min.js"
      onload="ANSWERS.domReady(initAnswers)"
      async
      defer
    ></script>
  </head>
  <body>
    <div class="search_form"></div>
  </body>
</html>

From the behavior you’re describing, it seems this might cause the modal to open on page load, too – I’m don’t think that would be desired UX, but happy to discuss further!

Thanks,
Rose

3

Hi Rose,

Thanks for your reply here! The client added this parameter, but noted that they aren’t seeing any change. Is this functionality only available after a certain SDK version?

Update - they followed up that they’re now seeing this work, but not for the modal. They are wondering if it’s limited by the fact that a click is necessary to trigger the modal. I asked them to confirm that they’ve implemented the param in the onReady for the modal search bar. Would we need access to their QA environment to fully debug/diagnose the issue here?

Best,
Josh

4

Hi Rose!

Picking up where Josh left off here - could you let me know what the next steps are in terms of helping to debug this on their modal? I’ve copied Josh’s update below:

“Update - they followed up that they’re now seeing this work, but not for the modal. They are wondering if it’s limited by the fact that a click is necessary to trigger the modal. I asked them to confirm that they’ve implemented the param in the onReady for the modal search bar. Would we need access to their QA environment to fully debug/diagnose the issue here?”

Let me know if there’s any more information I can provide!

Best,
Sano

5

Hi Sano!

Some custom JS is necessary if the search bar is behind a modal. High level, said JS would need to focus the search bar input when the modal is opened.

Here’s a working example: search-bar-in-modal - CodeSandbox

The JS to open the modal begins on line 88. In that function, we call document.getElementById("yxt-SearchBar-input--search-bar").focus();. In other words, once the modal is opened, focus is applied to the search bar. (You can read more about the focus method here.)

Your client likely has a similar function to open their modal; they would need to include the above line of JS in that function in order to get the search bar to focus properly.

Hope this helps!

Thanks,
Rose

1 Like
6

Hi Rose,

Thanks so much for the resources! The client was able to successfully implement autofocus on the search bar with your example, and I also learned a lot.

Thanks again,
Sano