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

View File

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

View File

@ -39,7 +39,7 @@ export class Engine {
placeholder="Search page or heading..."
>
</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">
<template x-for="result in results">
<div x-html="${namespace}.generateHTML(result)" class="flex size-full"></div>