fix: #1625

fix: Input add @deprecated message for onInput, onFocus, onBlur, onKeydown

feat: add oninput, onfocus, onblur, onkeydown

Author: shinokada

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

@@ -3,7 +3,14 @@
   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, comboItemClass, onInput, onFocus, onBlur, onKeydown, ...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, comboItemClass, onInput, onFocus, onBlur, onKeydown, oninput, onfocus, onblur, onkeydown, ...restProps }: InputProps<InputValue> = $props();
+
+  // onSelect is a custom combobox selection handler that takes a string
+  // standard DOM events, onInput, onFocus, onBlur, onKeydown will be deprecated in the next minor version
+  const resolvedOnInput = $derived(oninput || onInput);
+  const resolvedOnFocus = $derived(onfocus || onFocus);
+  const resolvedOnBlur = $derived(onblur || onBlur);
+  const resolvedOnKeydown = $derived(onkeydown || onKeydown);
 
   // Automatically enable combobox when data is provided
   const isCombobox = $derived(Array.isArray(data) && data.length > 0);
@@ -143,29 +150,29 @@
 
   // Combined event handlers that call custom handlers first, then default behavior
   function handleInput(event: Event) {
-    if (onInput) {
-      onInput(event);
+    if (resolvedOnInput) {
+      resolvedOnInput(event);
     }
     defaultHandleInput(event);
   }
 
   function handleFocus(event: FocusEvent) {
-    if (onFocus) {
-      onFocus(event);
+    if (resolvedOnFocus) {
+      resolvedOnFocus(event);
     }
     defaultHandleFocus(event);
   }
 
   function handleBlur(event: FocusEvent) {
-    if (onBlur) {
-      onBlur(event);
+    if (resolvedOnBlur) {
+      resolvedOnBlur(event);
     }
     defaultHandleBlur(event);
   }
 
   function handleKeydown(event: KeyboardEvent) {
-    if (onKeydown) {
-      onKeydown(event);
+    if (resolvedOnKeydown) {
+      resolvedOnKeydown(event);
     }
     defaultHandleKeydown(event);
   }

src/lib/types.ts

@@ -780,9 +780,17 @@ export interface InputProps<T extends InputValue = string> extends Omit<HTMLInpu
   onSelect?: (item: string) => void;
   comboClass?: ClassValue;
   comboItemClass?: ClassValue;
+  oninput?: (event: Event) => void;
+  onfocus?: (event: FocusEvent) => void;
+  onblur?: (event: FocusEvent) => void;
+  onkeydown?: (event: KeyboardEvent) => void;
+  /** @deprecated Use `oninput` instead. Will be removed in next minor version. */
   onInput?: (event: Event) => void;
+  /** @deprecated Use `onfocus` instead. Will be removed in next minor version. */
   onFocus?: (event: FocusEvent) => void;
+  /** @deprecated Use `onblur` instead. Will be removed in next minor version. */
   onBlur?: (event: FocusEvent) => void;
+  /** @deprecated Use `onkeydown` instead. Will be removed in next minor version. */
   onKeydown?: (event: KeyboardEvent) => void;
 }
 

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

@@ -111,7 +111,11 @@ text with one click.
 />
 ```
 
-## Custom Event Handlers
+## Event Handlers
+
+Use lowercase event handlers: `oninput`, `onfocus`, `onblur`, `onkeydown`. 
+
+**Migration**: `OnInput`, `onFocus`, `onBlur`, and `onKeydown` will be **deprecated** from version v1.7.0.
 
 ```svelte example
 <script lang="ts">
@@ -122,10 +126,10 @@ text with one click.
 <P class="my-4">{value}</P>
 <Input
   bind:value
-  onInput={(e) => console.log("Custom input:", e)}
-  onFocus={(e) => console.log("Input focused")}
-  onBlur={(e) => console.log("Input blurred")}
-  onKeydown={(e) => {
+  oninput={(e) => console.log("Custom input:", e)}
+  onfocus={(e) => console.log("Input focused")}
+  onblur={(e) => console.log("Input blurred")}
+  onkeydown={(e) => {
     if (e.key === "Tab") {
       console.log("Tab pressed");
     }

src/routes/utils/ExampleDarkMode.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   let { dark, onclick }: { dark: boolean; onclick: () => void } = $props();
-  console.log("dark in example: ", dark);
+  // console.log("dark in example: ", dark);
 </script>
 
 <button {onclick} type="button" class="hover:text-primary-700 dark:hover:text-primary-600 me-2 flex items-center rounded-lg border border-gray-200 bg-white p-2 text-xs font-medium text-gray-700 hover:bg-gray-100 focus:z-10 focus:ring-2 focus:ring-gray-300 focus:outline-hidden dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-500">

src/routes/utils/ExampleWrapper.svelte

@@ -53,7 +53,7 @@
     if (document && document.documentElement) {
       // Get the current dark mode state from document
       const isDark = document.documentElement.classList.contains("dark");
-      console.log("Dark mode detected from document:", isDark);
+      // console.log("Dark mode detected from document:", isDark);
 
       // Reset independent mode when document dark mode changes
       if (independentDarkMode) {
@@ -70,7 +70,7 @@
   // Sync the iframe dark mode with the current dark state
   function syncIframeDarkMode(): void {
     if (iframe && iframe.contentDocument) {
-      console.log("Syncing iframe dark mode:", dark);
+      // console.log("Syncing iframe dark mode:", dark);
       if (dark) {
         iframe.contentDocument.documentElement.classList.add("dark");
       } else {
@@ -98,7 +98,7 @@
 
     // Initial dark mode check
     dark = document.documentElement.classList.contains("dark");
-    console.log("Initial dark mode state:", dark);
+    // console.log("Initial dark mode state:", dark);
 
     // Set up a mutation observer to watch for class changes on documentElement
     documentObserver = new MutationObserver((mutations) => {