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

[Roxenn]

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