fix(input): resize floating values on element resize

dvcol · Jan 17, 2025 · f77acc2 · f77acc2
1 parent 67ec5b4
commit f77acc2
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/demo/components/DemoTooltips.svelte b/demo/components/DemoTooltips.svelte
@@ -54,9 +54,17 @@
     containerProps={{ style: 'margin-left: 6.75rem' }}
     options={[
       { value: 'top', label: 'Top' },
+      { value: 'top-start', label: 'Top Start' },
+      { value: 'top-end', label: 'Top End' },
       { value: 'right', label: 'Right' },
+      { value: 'right-start', label: 'Right Start' },
+      { value: 'right-end', label: 'Right End' },
       { value: 'bottom', label: 'Bottom' },
+      { value: 'bottom-start', label: 'Bottom Start' },
+      { value: 'bottom-end', label: 'Bottom End' },
       { value: 'left', label: 'Left' },
+      { value: 'left-start', label: 'Left Start' },
+      { value: 'left-end', label: 'Left End' },
     ]}
   />
 
@@ -107,7 +115,7 @@
 
     <NeoInput bind:value={content} bind:containerRef placeholder="Placeholder" rounded={options.rounded} />
 
-    <NeoTooltip {tooltip} target={containerRef} offset={8} width {...options} />
+    <NeoTooltip {tooltip} target={containerRef} offset={8} width="min" {...options} />
   </div>
 </div>
 

diff --git a/src/lib/inputs/common/NeoInput.svelte b/src/lib/inputs/common/NeoInput.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { wait } from '@dvcol/common-utils/common/promise';
+  import { resize } from '@dvcol/svelte-utils/resize';
 
   import type { FocusEventHandler, PointerEventHandler } from 'svelte/elements';
 
@@ -11,7 +12,7 @@
   import NeoLabel from '~/inputs/common/NeoLabel.svelte';
   import { NeoInputLabelPosition } from '~/inputs/common/neo-input.model.js';
 
-  import { toTransition, toTransitionProps } from '~/utils/action.utils.js';
+  import { type ActionWithProps, toTransition, toTransitionProps } from '~/utils/action.utils.js';
   import {
     computeGlassFilter,
     computeHoverShadowElevation,
@@ -182,8 +183,8 @@
   };
 
   $effect(() => {
-    if (first) waitForTick();
-    updateRefs();
+    if (!first) return updateRefs();
+    waitForTick();
   });
 
   let visible = $state(false);
@@ -237,6 +238,7 @@
       class:neo-deep={elevation < -3}
       {disabled}
       {readonly}
+      use:resize={updateRefs}
       {...beforeProps}
     >
       {@render before(context)}
@@ -271,6 +273,7 @@
       class:neo-deep={elevation < -3}
       {disabled}
       {readonly}
+      use:resize={updateRefs}
       {...afterProps}
     >
       {@render after(context)}
@@ -377,6 +380,7 @@
         required={rest.required}
         {disabled}
         onclick={onLabelClick}
+        use={{ use: resize, props: updateRefs } as ActionWithProps}
         {...labelProps}
       >
         {@render input()}