diff --git a/src/lib/ae_stores.ts b/src/lib/ae_stores.ts index 717d5780..9e8f8862 100644 --- a/src/lib/ae_stores.ts +++ b/src/lib/ae_stores.ts @@ -346,6 +346,8 @@ let ae_app_session_data_defaults: key_val = { disable_sys_footer: false, sys_menu: { + expand: false, + focus_passcode_input: false, }, debug_menu: { diff --git a/src/lib/e_app_access_type.svelte b/src/lib/e_app_access_type.svelte index 72e09777..cdb6c739 100644 --- a/src/lib/e_app_access_type.svelte +++ b/src/lib/e_app_access_type.svelte @@ -25,6 +25,7 @@ import { events_loc } from '$lib/ae_events_stores'; interface Props { log_lvl?: number; hide?: null|boolean; + focus_input: boolean; expand?: boolean; show_passcode_input: boolean; trigger_clear_access: null|boolean; @@ -33,6 +34,7 @@ interface Props { let { log_lvl = $bindable(0), hide = $bindable(false), + focus_input = $bindable(false), expand = $bindable(false), show_passcode_input = $bindable(false), trigger_clear_access = $bindable(null), @@ -54,15 +56,16 @@ let trigger: null|string|boolean = $state(null); // WARNING: There is a bug (I think) around here related to the entered_passcode not being cleared. There seems to be something different about how Svelte handles state in this component compared to the others. This might be related to the `$effect` or `$derived` usage. Maybe there are conflicting things trying to update the $ae_loc store at the same time. onMount(() => { + log_lvl = 2; if (log_lvl > 1) { console.log('** Element Mounted: ** Element Access Type'); } entered_passcode = ''; trigger = null; - /** @type {HTMLElement | null} */ - const to_focus = document.getElementById('access_passcode_input'); - to_focus?.focus(); + // /** @type {HTMLElement | null} */ + // const to_focus = document.getElementById('access_passcode_input'); + // to_focus?.focus(); }); onDestroy(() => { @@ -122,11 +125,15 @@ $effect(() => { }); // This does not seem to work. I feel like it should though...? -$effect(async () => { - if (show_passcode_input) { +$effect(() => { + if (!hide && focus_input) { + focus_input = false; + log_lvl = 2; // await tick(); // document.getElementById('access_passcode_input')?.focus(); - console.log('Effect: Setting focus on the passcode input field'); + if (log_lvl > 1) { + console.log('Effect: Setting focus on the passcode input field'); + } /** @type {HTMLElement | null} */ const to_focus = document.getElementById('access_passcode_input'); to_focus?.focus(); diff --git a/src/lib/e_app_sign_in_out.svelte b/src/lib/e_app_sign_in_out.svelte index 07dc0186..73524fd2 100644 --- a/src/lib/e_app_sign_in_out.svelte +++ b/src/lib/e_app_sign_in_out.svelte @@ -30,9 +30,9 @@ interface Props { } let { - log_lvl = 0, + log_lvl = $bindable(0), data = null, - hidden = true, + hidden = $bindable(true), }: Props = $props(); diff --git a/src/lib/e_app_sys_menu.svelte b/src/lib/e_app_sys_menu.svelte index e510fc29..1b8e568d 100644 --- a/src/lib/e_app_sys_menu.svelte +++ b/src/lib/e_app_sys_menu.svelte @@ -249,7 +249,7 @@ max-w-max --> if (!expand) { expand = true; - $ae_loc.sys_menu.expand = true; + $ae_sess.sys_menu.expand = true; $ae_loc.sys_menu.hide_access_type = false; $ae_loc.sys_menu.expand_access_type = true; // $ae_loc.sys_menu.expand_btn = false; @@ -281,7 +281,7 @@ max-w-max --> if (expand) { $ae_loc.sys_menu.hide_access_type = false; - $ae_loc.sys_menu.expand_access_type = false; + // $ae_loc.sys_menu.expand_access_type = false; expand = false; // $ae_loc.sys_menu.expand = true; @@ -322,14 +322,18 @@ max-w-max --> onclick={async () => { expand = true; + $ae_sess.sys_menu.expand = true; $ae_loc.sys_menu.hide_access_type = false; $ae_loc.sys_menu.expand_access_type = true; + $ae_sess.app_cfg.show_element__passcode_input = true; + $ae_sess.sys_menu.focus_passcode_input = true; + // $ae_loc.sys_menu.expand = true; // $ae_loc.sys_menu.expand_btn = false; // $ae_loc.app_cfg.show_element__access_type = true; // $ae_loc.app_cfg.show_element__passcode_input = true; - await tick(); + // await tick(); console.log('Layout button click: Focus on passcode input!'); /** @type {HTMLElement | null} */ const to_focus = document.getElementById('access_passcode_input'); @@ -426,25 +430,29 @@ max-w-max --> onclick={async () => { if (!expand) { expand = true; + $ae_sess.sys_menu.expand = true; + // $ae_loc.sys_menu.expand = true; // $ae_loc.sys_menu.expand_btn = false; $ae_loc.app_cfg.show_element__access_type = true; if ($ae_loc?.access_type == 'anonymous') { - $ae_sess.app_cfg.show_element__passcode_input = true; + $ae_sess.sys_menu.focus_passcode_input = true; + // $ae_sess.app_cfg.show_element__passcode_input = true; } else { - $ae_sess.app_cfg.show_element__passcode_input = false; + // $ae_sess.app_cfg.show_element__passcode_input = false; $ae_loc.sys_menu.expand_user = false; // Not in use yet $ae_sess.show__sign_in_out__fields = false; } // $ae_loc.app_cfg.show_element__passcode_input = true; - await tick(); - console.log('Layout button click: Focus on passcode input!'); - /** @type {HTMLElement | null} */ - const to_focus = document.getElementById('access_passcode_input'); - to_focus?.focus(); + // await tick(); + // console.log('Layout button click: Focus on passcode input!'); + // /** @type {HTMLElement | null} */ + // const to_focus = document.getElementById('access_passcode_input'); + // to_focus?.focus(); } else { expand = false; + $ae_sess.sys_menu.expand = false; // $ae_loc.sys_menu.expand = false; // $ae_loc.sys_menu.expand_btn = true; // $ae_loc.app_cfg.show_element__passcode_input = false; @@ -522,11 +530,14 @@ max-w-max --> onclick={() => { if (!expand) { expand = true; - $ae_loc.sys_menu.expand = true; + $ae_sess.sys_menu.expand = true; // $ae_loc.sys_menu.expand_btn = false; // $ae_loc.sys_menu.expand_access_type = true; + + // $ae_sess.app_cfg.show_element__passcode_input = true; + $ae_sess.sys_menu.focus_passcode_input = true; } else { - $ae_loc.sys_menu.expand = false; + $ae_sess.sys_menu.expand = false; $ae_loc.sys_menu.expand_user = false; // Not in use yet $ae_sess.show__sign_in_out__fields = false; // $ae_loc.sys_menu.expand_btn = true; @@ -570,9 +581,9 @@ max-w-max --> {#if $ae_loc?.app_cfg?.show_element__sign_in_out} + +