Predictive Search Drawer Closes Without Navigation on Enter Key Press - Dawn Theme

Shopify Discussion

Topic summary

A developer is experiencing an issue with the predictive search feature in Shopify’s Dawn theme (OS 2.0) using Alpine.js.

The Problem:
When users press Enter in the predictive search drawer, the drawer closes immediately without submitting the form or navigating to the search results page. The user remains on the current page with no search performed.

Expected Behavior:

  • Form should submit
  • Navigate to search results page
  • Drawer closes after navigation begins

Technical Context:
The issue occurs in the desktop version. The code includes an onKeydown() handler that attempts to prevent default behavior and submit the form when Enter is pressed, but the drawer closes prematurely instead.

Current Status:
The issue remains unresolved with no responses or solutions provided yet. The developer has shared the relevant JavaScript code from predictive-search.js and Liquid template structure for troubleshooting.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

Theme Details> - Theme: Dawn (OS 2.0)> - Using Alpine.js for interactions> - Predictive Search feature

Issue
The predictive search drawer closes without performing a search when Enter is pressed. Here’s the component code:

// assets/predictive-search.js
Alpine.data('PredictiveSearch', (resources) => ({
resultsHTML: null,
trimmedQuery: '',
loading: false,
selectedElement: null,
onKeydown() {
if (this.$event.code === 'Enter') {
const form = this.$el.closest('form');
if (form && this.trimmedQuery.length > 0) {
// Prevent default behaviors
this.$event.preventDefault();
this.$event.stopPropagation();
// Get the form action and query
const action = form.action;
const query = this.trimmedQuery;
// Just do a normal form submission
form.submit();
}
}
},
init() {
this.$watch('trimmedQuery', (value) => {
if (!value.length) {
this.closeResults();
this.resultsHTML = null;
} else {
this.openResults();
this.getSearchResults();
}
});
}
}));​

Visual Flow

<!-- snippets/header-search.liquid -->
<div
x-data="{ searchOpen: false }"
x-init="initTeleport($root); $store.modals.register('search', 'rightDrawer');"
class="hidden lg:block"
>
<template data-should-teleport="#right-drawer">
<div x-show="$store.modals.rightDrawer.contents === 'search'">
<!-- Search form here -->
</div>
</template>
</div>
<!-- sections/predictive-search.liquid -->
{%- if predictive_search.performed -%}
<div id="predictive-search-results"

data-search-results
class="predictive-search-results">
<!-- Results markup -->
</div>
{%- endif -%}

Expected Behavior
When pressing Enter:

  1. Form should submit
  2. Navigate to search results page
  3. Drawer should close only after navigation starts

Current Behavior
When pressing Enter:

  1. Drawer immediately closes
  2. No form submission occurs
  3. No navigation happens
  4. User stays on current page

This happens on the desktop version