fix: resolve undefined searchInput reference in Alpine.js component

The searchInput reference was not accessible due to nested x-data scopes. Moved sticky logic into searchResources() to ensure proper reference access.
This commit is contained in:
Lukas Eichenauer
2024-12-08 15:54:42 +01:00
parent 8d779c88ff
commit 1fd1aaabf4

View File

@@ -12,7 +12,7 @@
<div class="pb-4">Deploy resources, like Applications, Databases, Services...</div>
<div x-data="searchResources()">
@if ($current_step === 'type')
<div x-data="{ isSticky: false }" x-init="window.addEventListener('scroll', () => isSticky = window.pageYOffset > 100)" class="sticky top-0 z-50 py-2">
<div x-init="window.addEventListener('scroll', () => isSticky = window.pageYOffset > 100)" class="sticky top-0 z-50 py-2">
<input autocomplete="off" x-ref="searchInput" class="input-sticky"
:class="{ 'input-sticky-active': isSticky }" x-model="search" placeholder="Type / to search..."
@keydown.window.slash.prevent="$refs.searchInput.focus()">
@@ -137,6 +137,7 @@
return {
search: '',
loading: false,
isSticky: false,
services: [],
gitBasedApplications: [],
dockerBasedApplications: [],