Display of Search Results Problem

[resistorsoftware]

I have implemented a working autocomplete setup that functions perfectly in three Shopify themes. The HTML, Javascript and CSS all combine so that when I type into the input box autocomplete provides, I see the results.

However, I have one theme in Shopify (of course the production one the client uses) where I see my search results trigger and are found, but for whatever reason, the results are never displayed. It is as if the results are sent to >dev/null!

Is there some kind of debugging trick I can try to figure out why code that is working perfectly in 3/4 test scenarios has a specific problem in one? I am desperate to know what might be interfering with what should be a standard display of search results from autocomplete!

class HelloWorld extends HTMLElement {
  constructor() {
    super()
    console.log("Hello World search initialized")
    const schoolListEl = document.getElementById("school-list").innerHTML
    const schoolList = JSON.parse(schoolListEl)
    console.log("There are currently %d schools in the list", schoolList.length)
    
    addEventListener("DOMContentLoaded", (event) => {
      const { autocomplete } = window['@algolia/autocomplete-js'];
      console.log("seeting up school search autocomplete for ", autocomplete)
      autocomplete({
        container: '#school-search-ac',
        plugins: [],
        openOnFocus: true,
        placeholder: "Type in your school name, code or city to search",
        getSources() {
          return [
            {
              sourceId: 'links',
              templates: {
                item({ item, html }) {
                  return html`<div class="foo">${item.name}</div>`;
                },
              },
              getItems({ query }) {
                if(query == "") return [];
                let myData = schoolList.map((el) => ({
                  name: el.name,
                  code: el.code,
                  handle: el.handle
                })).filter( el =>
                  el.name.toLowerCase().includes(query.toLowerCase())
                );
                console.log("Data on query %o to return is %o", query, myData)
                return myData
              },
              getItemHandle({ item }) {
                return item.handle;
              },
              getItemCode( { item }) {
                return item.code
              },
              getItemName({ item }) {
                return item.name;
              },
            },
          ];
        }
      });
    });
  }
}
customElements.define('school-search', HelloWorld);

[resistorsoftware]

Well, since no one seems to be on the spot to help here, I found two things. One, the setup CSS has a base default z-index set to 9999 and I have no idea how that is used in the code, but when I hard-coded my aa_Panel to have a z-index of 1000 the results showed up fine. So that is a total gamble of a fix, and raises more questions than it answers, but I will leave it at that.

What does the 9999 even mean, and how is it used? Why does 1000 work when 9999 as a base did nothing?

[Haroenv]

If you search for z-index in the theme (https://github.com/algolia/autocomplete/blob/next/packages/autocomplete-theme-classic/src/theme.scss), you'll see that 9999 is chosen as an arbitrary large number so that the autocomplete shows up over most page items, but other elements being slightly higher or lower (+1 for example) so that it can render correctly, hope that helps!

[resistorsoftware]

I did find it used in calculating the size of the container in the modal used in small displays. Thanks for the info.