fix: navigation inactive on first init

This commit is contained in:
Break27 2024-09-21 00:24:40 +08:00
parent 23c1cc6b72
commit 4db1bc8244
3 changed files with 9 additions and 5 deletions

View File

@ -216,7 +216,7 @@ export class Folder extends BaseNode {
return ` return `
<div x-data="{ active: null, navigate: false }" <div x-data="{ active: null, navigate: false }"
x-init="router.on('ready', () => { x-init="let react = () => {
let isFromNav = navigate; let isFromNav = navigate;
let path = window.location.pathname; let path = window.location.pathname;
@ -234,11 +234,15 @@ export class Folder extends BaseNode {
} }
setTimeout(() => active?.scrollIntoView( setTimeout(() => active?.scrollIntoView(
{ behavior: 'smooth', block: 'center' }), 150); { behavior: 'smooth', block: 'center' }), 150);
};
router.on('ready', () => {
react();
}); });
router.on('navigate', () => { router.on('navigate', () => {
navigate = true; navigate = true;
setTimeout(() => navigate = false, 100); $nextTick(() => navigate = false);
})" });
$nextTick(() => react())"
>${html}</div> >${html}</div>
`; `;
} }

View File

@ -19,7 +19,7 @@ export default {
if (! this.route(path)) { if (! this.route(path)) {
if (! Routes.error) this.emit('error'); if (! Routes.error) this.emit('error');
return this.goto(Routes.error); else this.goto(Routes.error);
} }
this.emit('ready'); this.emit('ready');

View File

@ -39,7 +39,7 @@ export class Engine {
placeholder="Search page or heading..." placeholder="Search page or heading..."
> >
</div> </div>
<div x-effect="console.log(active)" x-show="active && value" class="absolute rounded-md border bg-white left-0 top-0 mt-9 min-w-48 max-h-96 shadow-xl overflow-y-auto overscroll-contain"> <div x-show="active && value" class="absolute rounded-md border bg-white left-0 top-0 mt-9 min-w-48 max-h-96 shadow-xl overflow-y-auto overscroll-contain">
<div x-data="{ results: [] }" x-effect="results = ${namespace}.search(value)" class="empty:hidden flex flex-col p-1.5"> <div x-data="{ results: [] }" x-effect="results = ${namespace}.search(value)" class="empty:hidden flex flex-col p-1.5">
<template x-for="result in results"> <template x-for="result in results">
<div x-html="${namespace}.generateHTML(result)" class="flex size-full"></div> <div x-html="${namespace}.generateHTML(result)" class="flex size-full"></div>