fix: #1625

Author: shinokada

src/lib/forms/input-field/Input.svelte

@@ -3,7 +3,7 @@
   import { CloseButton, type SizeType, type InputProps, type InputValue, cn } from "$lib";
   import { input, clampSize } from ".";
 
-  let { children, left, right, value = $bindable(), elementRef = $bindable(), clearable = false, size, color = "default", class: className, wrapperClass, leftClass, rightClass, divClass, clearableSvgClass, clearableColor = "none", clearableClass, clearableOnClick, data = [], maxSuggestions = 5, onSelect, comboClass, ...restProps }: InputProps<InputValue> = $props();
+  let { children, left, right, value = $bindable(), elementRef = $bindable(), clearable = false, size, color = "default", class: className, wrapperClass, leftClass, rightClass, divClass, clearableSvgClass, clearableColor = "none", clearableClass, clearableOnClick, data = [], maxSuggestions = 5, onSelect, comboClass,onInput, onFocus, onBlur, onKeydown, ...restProps }: InputProps<InputValue> = $props();
 
   // Automatically enable combobox when data is provided
   const isCombobox = $derived(Array.isArray(data) && data.length > 0);
@@ -80,20 +80,21 @@
     }
   });
 
-  function handleInput() {
+  // Default event handlers
+  function defaultHandleInput(event: Event) {
     // Reset backspace flag if user starts typing again
     if ((value as string).length > 0) {
       backspaceUsed = false;
     }
     updateSuggestions();
   }
 
-  function handleFocus() {
+  function defaultHandleFocus(event: FocusEvent) {
     isFocused = true;
     updateSuggestions();
   }
 
-  function handleBlur() {
+  function defaultHandleBlur(event: FocusEvent) {
     // Small delay to allow click on suggestion to fire first
     setTimeout(() => {
       isFocused = false;
@@ -102,7 +103,7 @@
     }, 200);
   }
 
-  function handleKeydown(event: KeyboardEvent) {
+  function defaultHandleKeydown(event: KeyboardEvent) {
     if (!isCombobox) return;
 
     // Special handling for backspace/delete - track when it's used to clear the input
@@ -138,6 +139,35 @@
     }
   }
 
+  // Combined event handlers that call custom handlers first, then default behavior
+  function handleInput(event: Event) {
+    if (onInput) {
+      onInput(event);
+    }
+    defaultHandleInput(event);
+  }
+
+  function handleFocus(event: FocusEvent) {
+    if (onFocus) {
+      onFocus(event);
+    }
+    defaultHandleFocus(event);
+  }
+
+  function handleBlur(event: FocusEvent) {
+    if (onBlur) {
+      onBlur(event);
+    }
+    defaultHandleBlur(event);
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (onKeydown) {
+      onKeydown(event);
+    }
+    defaultHandleKeydown(event);
+  }
+
   function selectItem(item: string) {
     value = item;
 

src/lib/types.ts

@@ -772,6 +772,10 @@ export interface InputProps<T extends InputValue = string> extends Omit<HTMLInpu
   maxSuggestions?: number;
   onSelect?: (item: string) => void;
   comboClass?: ClassValue;
+  onInput?: (event: Event) => void;
+  onFocus?: (event: FocusEvent) => void;
+  onBlur?: (event: FocusEvent) => void;
+  onKeydown?: (event: KeyboardEvent) => void;
 }
 
 // input-addon

src/routes/docs/forms/input-field.md

@@ -27,7 +27,7 @@ On this page you will find all of the input types based on multiple variants, st
 </script>
 ```
 
-## Input fields
+## Input Fields
 
 Use this example as a generic form element which includes multiple input fields types such as text, email, password, number, URL, and phone number and use the grid layout to add multiple columns and rows.
 
@@ -111,6 +111,14 @@ text with one click.
 />
 ```
 
+
+## Custom Event Handlers
+
+
+```svelte example
+hi
+```
+
 ## Accessing Input Element with elementRef
 
 ```svelte example class="flex justify-center" hideResponsiveButtons
@@ -168,7 +176,7 @@ text with one click.
 <Input data={carMakers} clearable placeholder="Clearable" />
 ```
 
-## Combobox with icon
+## Combobox with Icon
 
 ```svelte example class="h-80"
 <script>
@@ -184,7 +192,7 @@ text with one click.
 </Input>
 ```
 
-## Input sizes
+## Input Sizes
 
 Use the following examples to apply a small, default or large size for the input fields.
 
@@ -211,7 +219,7 @@ User the size prop to change the input size. Choose one from 'sm:text-md' | 'tex
 </Label>
 ```
 
-## Disabled state
+## Disabled State
 
 Get started with this example if you want to apply the disabled state to an input field. Add the disabled to change the input to disabled.
 
@@ -251,7 +259,7 @@ Use the following example to apply validation styles for success and error messa
 </div>
 ```
 
-## Input with icon
+## Input with Icon
 
 ```svelte example class="space-y-6"
 <script>
@@ -290,7 +298,7 @@ Use the following example to apply validation styles for success and error messa
 </Label>
 ```
 
-## Input group
+## Input Group
 
 This example can be used to add a descriptive icon or additional text inside the input field.
 
@@ -348,7 +356,7 @@ This example can be used to add a descriptive icon or additional text inside the
 </div>
 ```
 
-## Icon click handler
+## Icon Click Handler
 
 This example shows how to add `onclick` event handler to the icon in `Input`. By clicking an icon, it toggles icon and `type`: