Show warning on focus

ts/lib/components/SpinBox.svelte

@@ -23,7 +23,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let percentage = false;
 
     let input: HTMLInputElement;
-    let focused = false;
+    export let focused = false;
     let multiplier: number;
     $: multiplier = percentage ? 100 : 1;
 
@@ -133,6 +133,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         on:focusin={() => (focused = true)}
         on:focusout={() => (focused = false)}
         style:padding-left={percentage_padding}
+        {...$$restProps}
     />
     {#if percentage}
         <span class="suffix">

ts/routes/deck-options/FsrsOptions.svelte

@@ -40,7 +40,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     $: lastOptimizationWarning =
         $daysSinceLastOptimization > 30 ? tr.deckConfigTimeToOptimize() : "";
-    let showDesiredRetentionTooltip = newlyEnabled;
+    let desiredRetentionFocused = false;
+    $: console.log(desiredRetentionFocused)
+    $: showDesiredRetentionTooltip = newlyEnabled || desiredRetentionFocused;
 
     let computeParamsProgress: ComputeParamsProgress | undefined;
     let computingParams = false;
@@ -52,6 +54,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     $: desiredRetentionWarning = getRetentionWarning(
         roundedRetention,
         fsrsParams($config),
+        showDesiredRetentionTooltip
     );
     $: retentionWarningClass = getRetentionWarningClass(roundedRetention);
 
@@ -69,7 +72,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         reviewOrder: $config.reviewOrder,
     });
 
-    function getRetentionWarning(retention: number, params: number[]): string {
+    function getRetentionWarning(retention: number, params: number[], showDesiredRetentionTooltip: boolean): string {
         if (!showDesiredRetentionTooltip && getRetentionWarningClass(retention) === "alert-info") {
             return "";
         }
@@ -243,7 +246,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     min={0.7}
     max={0.99}
     percentage={true}
-    on:focus={() => (showDesiredRetentionTooltip = true)}
+    bind:focused={desiredRetentionFocused}
 >
     <SettingTitle on:click={() => openHelpModal("desiredRetention")}>
         {tr.deckConfigDesiredRetention()}

ts/routes/deck-options/SpinBoxFloatRow.svelte

@@ -15,6 +15,7 @@
     export let max = 9999;
     export let step = 0.01;
     export let percentage = false;
+    export let focused = false;
 </script>
 
 <Row --cols={13}>
@@ -23,7 +24,7 @@
     </Col>
     <Col --col-size={6} breakpoint="xs">
         <ConfigInput>
-            <SpinBox bind:value {min} {max} {step} {percentage} />
+            <SpinBox bind:value {min} {max} {step} {percentage} bind:focused />
             <RevertButton slot="revert" bind:value {defaultValue} />
         </ConfigInput>
     </Col>