granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix input focus loss when error state changes

Browse source 
always wrap in fieldset to keep DOM structure stable
This commit is contained in:
Justin Edmund 2025-12-13 22:14:32 -08:00
parent 9787af9c42
commit 362db1238f
1 changed files with 40 additions and 99 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

139
src/lib/components/ui/Input.svelte
View file

@ -99,62 +99,26 @@
}) })
</script> </script>
{#if label || error} <fieldset class={fieldsetClasses}>
<fieldset class={fieldsetClasses}> {#if label}
{#if label} <Label.Root class="label" for={restProps.id}>
<Label.Root class="label" for={restProps.id}> {label}
{label} {#if required}
{#if required} <span class="required">*</span>
<span class="required">*</span> {/if}
{/if} </Label.Root>
</Label.Root> {/if}
{/if}
{#if hasWrapper} {#if hasWrapper}
<div class={inputClasses}> <div class={inputClasses}>
{#if leftIcon} {#if leftIcon}
<span class="iconLeft"> <span class="iconLeft">
<Icon name={leftIcon} size={16} /> <Icon name={leftIcon} size={16} />
</span> </span>
{/if} {/if}
<input
bind:value
{type}
{placeholder}
{disabled}
{readonly}
{required}
maxlength={maxLength}
data-1p-ignore={no1password}
onblur={handleBlur}
onfocus={handleFocus}
oninput={handleInput}
{...restProps}
/>
{#if rightIcon}
<span class="iconRight">
<Icon name={rightIcon} size={16} />
</span>
{/if}
{#if validationIcon}
<span class="validationIcon {validationState}">
<Icon name={validationIcon} size={16} />
</span>
{/if}
{#if showCounter}
<span class="counter" class:warning={charsRemaining !== undefined && charsRemaining <= 5}>
{charsRemaining !== undefined ? charsRemaining : currentCount}
</span>
{/if}
</div>
{:else}
<input <input
bind:value bind:value
class={inputClasses}
{type} {type}
{placeholder} {placeholder}
{disabled} {disabled}
@ -167,22 +131,29 @@
oninput={handleInput} oninput={handleInput}
{...restProps} {...restProps}
/> />
{/if}
{#if error} {#if rightIcon}
<span class="error">{error}</span> <span class="iconRight">
{/if} <Icon name={rightIcon} size={16} />
</fieldset> </span>
{:else if hasWrapper} {/if}
<div class={inputClasses}>
{#if leftIcon}
<span class="iconLeft">
<Icon name={leftIcon} size={16} />
</span>
{/if}
{#if validationIcon}
<span class="validationIcon {validationState}">
<Icon name={validationIcon} size={16} />
</span>
{/if}
{#if showCounter}
<span class="counter" class:warning={charsRemaining !== undefined && charsRemaining <= 5}>
{charsRemaining !== undefined ? charsRemaining : currentCount}
</span>
{/if}
</div>
{:else}
<input <input
bind:value bind:value
class={inputClasses}
{type} {type}
{placeholder} {placeholder}
{disabled} {disabled}
@ -195,42 +166,12 @@
oninput={handleInput} oninput={handleInput}
{...restProps} {...restProps}
/> />
{/if}
{#if rightIcon} {#if error}
<span class="iconRight"> <span class="error">{error}</span>
<Icon name={rightIcon} size={16} /> {/if}
</span> </fieldset>
{/if}
{#if validationIcon}
<span class="validationIcon {validationState}">
<Icon name={validationIcon} size={16} />
</span>
{/if}
{#if showCounter}
<span class="counter" class:warning={charsRemaining !== undefined && charsRemaining <= 5}>
{charsRemaining !== undefined ? charsRemaining : currentCount}
</span>
{/if}
</div>
{:else}
<input
bind:value
class={inputClasses}
{type}
{placeholder}
{disabled}
{readonly}
{required}
maxlength={maxLength}
data-1p-ignore={no1password}
onblur={handleBlur}
onfocus={handleFocus}
oninput={handleInput}
{...restProps}
/>
{/if}
<style lang="scss"> <style lang="scss">
@use '$src/themes/spacing' as *; @use '$src/themes/spacing' as *;