Skip to main content


Events emitted by the FindkitUI instance. See on() and once().


const unsubscribe = ui.on("open", () => {
alert("Modal opened!");

Event Names

The available event names.


Delayed loading event. Fired when any network request issued by FinkditUI takes more than usual due to bad network conditions. If the network is quick enough this event never fires. Fired for the lazy load and search requests.

Used to implement loading indicator in a way it does not flash when the responses instant. Clear the loading indicator in the loading-done event.

If you need to know excatly when the search requests happen see fetch and fetch-done events.

Also available as useLoading slot override hook.

Event Object Interface


Fired when the loading event completes.

Event Object Interface


When the modal is opened

Event Object Interface


When the modal is requested to open. Used to add loading indicators when the lazy loading has not yet happened. Emitted before open event.

Event Object Interface


Emitted when the modal is closed

Emitted when the user has stopped typing search terms. Used to for search analytics.

Event Object Interface


Emitted when the .params changes from a .updateParams() call.

Event Object Interface


Emitted when the .groups changes from a .updateGroups() call.

Event Object Interface


Emitted when the status changes

Event Object Interface


Emitted before sending a search request.

It possible to make transient updates to the search request inside the fetch event handler either by updating the search terms on the event object event.terms property or by calling the event.transientUpdateParams() or event.transientUpdateGroups(). The updates are only used for that specific search and are not not persisted to the internal FindkitUI state. The transient* methods otherwise work like the normal updateParams and updateGroups methods.

A common use case is to sort results by creation date when there are no search terms and by relevancy when user types some search terms.

const ui = new FindkitUI({
publicToken: "<token>",
minTerms: 0,

ui.on("fetch", (event) => {
// Sort by creation date when there is no search terms
if (event.terms.length.trim() === "") {
event.transientUpdateParams((params) => {
params.sort = { created: { $order: "desc" } };

Another use case is to implement customs terms that actually are filters:

ui.on("fetch", (event) => {
const tags = [];

// Turn "tag:electronics computer" to "computer"
event.terms = event.terms.replaceAll(/tag:([^ ]+)/g, (tag) => {
return "";

// And filter using the "electronics" tag
if (tags.length > 0) {
filter: { tags: { $all: tags } },

The transient methods and terms updating is added in v0.13.0

Event Object Interface


Emitted when a search request completes

Event Object Interface


When a search hit is clicked.

Event Object Interface


New in v0.5.0

Emitted when

  • <html lang> is initially read
  • <html lang> is mutated
  • Language is set explicitly with setLang
Event Object Interface


New in v0.9.0

Emits data previously set using the setCustomRouterData method when the Findkit router reads the URL. If there is no custom data in the URL defaultCustomRouterData is emitted. The URL is read on page load and on History pushState and replaceState calls.

Read the Custom Router Data page for more information.

ui.on("custom-router-data", (e) => {
// Use to fill form inputs, update React/Vue/Svelte state...
// Update search params using .updateParams()
Event Object Interface


New in v0.8.0

Emitted when an input is bound using .bindInput() or useInput(). This is also called for the build-in input.

Event Object Interface


New in v0.8.0

When an input is unbound using the unbound method returned from .bindInput(). Emitted also when the UI is disposed with .dispose().

Use to properly cleanup any listeners you set on the bind-input event.


ui.on("bind-input", (e1) => {
const listener = () => {
/* whatever */

e1.input.addEventListener("focus", listener);

ui.once("unbind-input", (e2) => {
if (e1.input === e2.input) {
e.input.removeEventListener("focus", listener);
Event Object Interface


Emitted when the FindkitUI instance is discarded with the .dispose() method.

Full events api