Skip to content

Bug: Clicking submit button does not trigger chat submission in Sidepanel Ask AI (@algolia/sitesearch) #30

Description

@stuart-haddad

Summary

In the sidepanel-askai experience (@algolia/sitesearch), clicking the chat
submit button (.ss-search-submit-chat-button) does not submit the question.
No network request is sent, and no console error is thrown. Submitting via
the Enter key works correctly. This is reproducible in Algolia's own official
demo for this component, not just in our implementation, so it does not
appear to be an integration-specific issue.

Package

@algolia/sitesearch, sidepanel-askai experience, vanilla JS build
(via https://unpkg.com/@algolia/sitesearch@latest/dist/sidepanel-askai.min.js)

Steps to reproduce

  1. Initialize SiteSearchSidepanelAskAI per the documented vanilla JS setup (container, applicationId, apiKey, indexName, assistantId, agentStudio: true).
  2. Open the sidepanel and type a question into the chat input.
  3. Click the submit button (the up-arrow icon, .ss-search-submit-chat-button).

Expected behavior

The question is submitted, identical to pressing Enter.

Actual behavior

Nothing happens. No request appears in the Network tab. No console errors.

Diagnostics already performed

Confirmed mousedown, mouseup, and click events all fire correctly on
the button itself when manually instrumented with addEventListener —
ruling out an overlay, z-index, or pseudo-element intercepting the click.
Confirmed the issue is not caused by our own site's custom JavaScript: it
reproduces with all custom scripts removed, and in a clean incognito
browser profile with no extensions.
Confirmed Enter-key submission on the same input works correctly every time.
Confirmed the issue reproduces in Algolia's own official SiteSearch +
Ask AI demo, not only in our implementation - https://codesandbox.io/p/github/algolia/sitesearch

Suspected cause (unconfirmed)

The widget appears to rely on native HTML form submission (a
inside a element) rendered via Preact.
Enter-key submission likely triggers the form's native submit event
directly, while the button's click does not appear to be wired to any
handler that produces the same effect. We have not been able to confirm this
against the unminified source.

Workaround currently in use

We are manually dispatching a submit event on the form when the button is
clicked, using event delegation so it survives panel re-renders:

jsdocument.addEventListener('click', (e) => {
  const button = e.target.closest('.ss-search-submit-chat-button');
  if (!button) return;
  const form = button.closest('search') || button.closest('form');
  if (!form) return;
  const input = form.querySelector('input');
  if (!input || !input.value.trim()) return;
  e.preventDefault();
  form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
});

This resolves the issue on our end, but we wanted to flag it as we expect
other implementers will hit the same problem, and we'd prefer not to carry a
manual workaround indefinitely.

Environment

Webflow site using vanilla JS implementation of SiteSearch and AskAI
Browser: reproduced across multiple browsers - Chrome, Firefox, Safari
@algolia/sitesearch version: latest via unpkg

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions