algolia / algolia/sitesearch

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

Open
#30 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
24
Forks
8
PR merge metrics
No merged PRs in 30d

Description

### 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

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with the documented vanilla JS sidepanel-askai entry point and the published dist/sidepanel-askai.min.js build, then compare the button and Enter-key paths in the official CodeSandbox demo. Verify that clicking .ss-search-submit-chat-button submits the question and sends the same request as pressing Enter, without requiring the reported workaround.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
57/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.