fix multiple keyboard event bind

Author: javadbat

CHANGELOG.md

@@ -1,10 +1,11 @@
 # changelog
 
-## [5.4.0] - upcoming
+## [5.4.5] - 2025-02-13
 
 ### new features:
 - add new Events like `onLoad`,`onInit`, `onInvalid`, `onInput`, `onBeforeInput`, `onKeyPress`, `onKeyDown` to react component & `beforeinput`, `input`, `keydown` to web component.
 - add `jb-core` as a dependency to make all events following the new events standard.
+- capture and silent input keyboard events to unify all keyboard events
 
 ## [5.3.0] - 2024-11-30
 ### Breaking changes:

lib/jb-date-input.ts

@@ -13,10 +13,9 @@ import { checkMaxValidation, checkMinValidation, getEmptyValueObject, handleDayB
 import { enToFaDigits, faToEnDigits } from '../../../common/scripts/persian-helper';
 import { ValidationHelper, type ValidationResult, type ValidationItem, type WithValidation, type ShowValidationErrorInput} from 'jb-validation';
 import { requiredValidation } from './validations';
-import { isMobile } from '../../../common/scripts/device-detection';
 // eslint-disable-next-line no-duplicate-imports
 import { JBInputWebComponent } from 'jb-input';
-import { createInputEvent, createKeyboardEvent, createFocusEvent } from 'jb-core';
+import { createInputEvent, createKeyboardEvent, createFocusEvent, listenAndSilentEvent, isMobile } from 'jb-core';
 export * from "./types.js";
 
 if (HTMLElement == undefined) {
@@ -375,12 +374,13 @@ export class JBDateInputWebComponent extends HTMLElement implements WithValidati
     }
   }
   #registerEventListener() {
-    this.elements.input.addEventListener('blur', this.#onInputBlur.bind(this), { passive: false, capture:false });
-    this.elements.input.addEventListener('focus', this.#onInputFocus.bind(this), { passive: false, capture:false });
     this.elements.input.addEventListener('beforeinput', this.#onInputBeforeInput.bind(this));
-    this.elements.input.addEventListener('keypress', this.#onInputKeyPress.bind(this), { capture:false });
-    this.elements.input.addEventListener('keyup', this.#onInputKeyup.bind(this), { capture:false });
-    this.elements.input.addEventListener('keydown', this.#onInputKeydown.bind(this),{capture:false});
+    listenAndSilentEvent(this.elements.input, 'focus', this.#onInputFocus.bind(this),{passive:true});
+    listenAndSilentEvent(this.elements.input, 'blur', this.#onInputBlur.bind(this),{passive:true});
+    listenAndSilentEvent(this.elements.input, 'keypress', this.#onInputKeyPress.bind(this));
+    listenAndSilentEvent(this.elements.input, 'keyup', this.#onInputKeyup.bind(this));
+    listenAndSilentEvent(this.elements.input, 'keydown', this.#onInputKeydown.bind(this));
+
     //
     this.elements.calendarTriggerButton.addEventListener('focus', this.#onCalendarButtonFocused.bind(this));
     this.elements.calendarTriggerButton.addEventListener('blur', this.#onCalendarButtonBlur.bind(this));
@@ -683,7 +683,6 @@ export class JBDateInputWebComponent extends HTMLElement implements WithValidati
     this.dispatchEvent(keyPressEvent);
   }
   #onInputKeyup(e: KeyboardEvent) {
-    debugger;
     this.#updateValueFromInputString(this.#sInputValue);
     this.#dispatchOnInputKeyup(e);
   }

package.json

@@ -10,11 +10,13 @@
     "jb",
     "jb-date-input",
     "calendar",
+    "date input",
     "jalali calendar",
     "jalali date",
     "shamsi",
     "jalali",
     "web component",
+    "react component",
     "persian date",
     "persian calendar",
     "persian date input",
@@ -28,7 +30,7 @@
     "jalali web-component",
     "jalali web component"
   ],
-  "version": "5.4.3",
+  "version": "5.4.5",
   "bugs": "https://github.com/javadbat/jb-date-input/issues",
   "license": "MIT",
   "files": [
@@ -50,11 +52,11 @@
   "dependencies": {
     "date-fns": "^2.28.0",
     "date-fns-jalali": "^2.28.0-1",
-    "jb-calendar": ">=4.1.5",
+    "jb-calendar": ">=4.2.2",
     "jb-popover":">=1.1.0",
     "jb-validation":">=0.2.0",
-    "jb-input":">=3.6.1",
-    "jb-core":"0.0.4"
+    "jb-input":">=3.6.2",
+    "jb-core":"0.1.0"
   },
   "devDependencies": {
     "jb-form":">=0.6.10"

react/lib/events-hook.ts

@@ -21,7 +21,7 @@ export type EventProps = {
   onChange?: (e: JBDateInputEventType<Event>) => void,
   onInput?: (e: JBDateInputEventType<InputEvent>) => void,
   onBeforeInput?: (e: JBDateInputEventType<InputEvent>) => void,
-  onKeyUp1?: (e: JBDateInputEventType<KeyboardEvent>) => void,
+  onKeyUp?: (e: JBDateInputEventType<KeyboardEvent>) => void,
   onKeyPress?: (e: JBDateInputEventType<KeyboardEvent>) => void,
   onKeyDown?: (e: JBDateInputEventType<KeyboardEvent>) => void,
   /*
@@ -42,7 +42,7 @@ export function useEvents(element:RefObject<JBDateInputWebComponent>,props:Event
   useEvent(element, 'change', props.onChange, true);
   useEvent(element, 'beforeinput', props.onBeforeInput, false);
   useEvent(element, 'input', props.onInput, true);
-  useEvent(element, 'keyup', props.onKeyUp1, true);
+  useEvent(element, 'keyup', props.onKeyUp, true);
   useEvent(element, 'keydown', props.onKeyDown, false);
   useEvent(element, 'keypress', props.onKeyPress, true);
   useEvent(element, 'select', props.onSelect, true);

react/tsconfig.json

@@ -8,7 +8,7 @@
         "../../../common/hooks/**/*.js",
         "lib/**/*.ts",
         "lib/**/*.tsx"
-    ],
+, "../../jb-core/lib/device-detection.ts"    ],
     "exclude": [
         "node_modules",
         "**/*.spec.ts",

tsconfig.json

@@ -5,7 +5,7 @@
     "include": [
         "../global.d.ts",
         "lib/**/*.ts",
-        "../../common/scripts/**/*.ts",
+        "../../common/scripts/**/*.ts", "../jb-core/lib/device-detection.ts",
     ],
     "exclude": [
         "node_modules",