noph-ui 0.13.1 → 0.13.3

package/dist/text-field/TextField.svelte

@@ -17,24 +17,29 @@
 		variant = 'filled',
 		placeholder = ' ',
 		element = $bindable(),
+		inputElement = $bindable(),
 		...attributes
 	}: TextFieldProps = $props()
 
 	let errorRaw: boolean = $state(error)
 	let errorTextRaw: string = $state(errorText)
+	let focusOnInvalid = $state(true)
+	let checkValidity = $state(false)
 	$effect(() => {
 		errorRaw = error
 		errorTextRaw = errorText
 	})
-	let textElement: HTMLInputElement | HTMLTextAreaElement | undefined = $state()
 
 	$effect(() => {
-		if (textElement) {
-			textElement.form?.addEventListener('reset', () => {
+		if (inputElement) {
+			inputElement.form?.addEventListener('reset', () => {
 				errorRaw = error
 				value = ''
 			})
-			textElement.addEventListener('invalid', (event) => {
+			inputElement.addEventListener('input', () => {
+				checkValidity = true
+			})
+			inputElement.addEventListener('invalid', (event) => {
 				event.preventDefault()
 				const { currentTarget } = event as Event & {
 					currentTarget: HTMLInputElement | HTMLTextAreaElement
@@ -43,18 +48,22 @@
 				if (errorText === '') {
 					errorTextRaw = currentTarget.validationMessage
 				}
-				if (isFirstInvalidControlInForm(currentTarget.form, currentTarget)) {
+				if (focusOnInvalid && isFirstInvalidControlInForm(currentTarget.form, currentTarget)) {
 					currentTarget.focus()
 				}
 			})
 
-			textElement.addEventListener('change', (event) => {
+			inputElement.addEventListener('blur', (event) => {
 				const { currentTarget } = event as Event & {
 					currentTarget: HTMLInputElement | HTMLTextAreaElement
 				}
-				if (currentTarget.checkValidity()) {
-					errorRaw = error
-					errorTextRaw = errorText
+				if (checkValidity) {
+					focusOnInvalid = false
+					if (currentTarget.checkValidity()) {
+						errorRaw = error
+						errorTextRaw = errorText
+					}
+					focusOnInvalid = true
 				}
 			})
 		}
@@ -122,7 +131,7 @@
 								aria-label={label}
 								{...attributes}
 								bind:value
-								bind:this={textElement}
+								bind:this={inputElement}
 								class="input"
 								{placeholder}
 								rows={attributes.rows || 2}
@@ -138,7 +147,7 @@
 									aria-label={label}
 									{...attributes}
 									bind:value
-									bind:this={textElement}
+									bind:this={inputElement}
 									class="input"
 									{placeholder}
 									aria-invalid={errorRaw}

package/dist/text-field/TextField.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { TextFieldProps } from './types.ts';
-declare const TextField: import("svelte").Component<TextFieldProps, {}, "element" | "value">;
+declare const TextField: import("svelte").Component<TextFieldProps, {}, "element" | "value" | "inputElement">;
 type TextField = ReturnType<typeof TextField>;
 export default TextField;

package/dist/text-field/types.d.ts

@@ -12,6 +12,7 @@ interface FieldProps {
     end?: Snippet;
     noAsterisk?: boolean;
     element?: HTMLSpanElement;
+    inputElement?: HTMLInputElement | HTMLTextAreaElement;
 }
 export interface InputFieldProps extends HTMLInputAttributes, FieldProps {
     type?: 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url' | 'datetime-local';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "noph-ui",
-  "version": "0.13.1",
+  "version": "0.13.3",
   "license": "MIT",
   "homepage": "https://noph.dev",
   "repository": {