feat(input, textarea): expose native events for ionBlur and ionFocus (#21777)

resolves #17363

core/api.txt

@@ -479,9 +479,9 @@ ion-input,prop,type,"date" | "datetime-local" | "email" | "month" | "number" | "
 ion-input,prop,value,null | number | string | undefined,'',false,false
 ion-input,method,getInputElement,getInputElement() => Promise<HTMLInputElement>
 ion-input,method,setFocus,setFocus() => Promise<void>
-ion-input,event,ionBlur,void,true
+ion-input,event,ionBlur,FocusEvent,true
 ion-input,event,ionChange,InputChangeEventDetail,true
-ion-input,event,ionFocus,void,true
+ion-input,event,ionFocus,FocusEvent,true
 ion-input,event,ionInput,KeyboardEvent,true
 ion-input,css-prop,--background
 ion-input,css-prop,--color
@@ -1229,9 +1229,9 @@ ion-textarea,prop,value,null | string | undefined,'',false,false
 ion-textarea,prop,wrap,"hard" | "off" | "soft" | undefined,undefined,false,false
 ion-textarea,method,getInputElement,getInputElement() => Promise<HTMLTextAreaElement>
 ion-textarea,method,setFocus,setFocus() => Promise<void>
-ion-textarea,event,ionBlur,void,true
+ion-textarea,event,ionBlur,FocusEvent,true
 ion-textarea,event,ionChange,TextareaChangeEventDetail,true
-ion-textarea,event,ionFocus,void,true
+ion-textarea,event,ionFocus,FocusEvent,true
 ion-textarea,event,ionInput,KeyboardEvent,true
 ion-textarea,css-prop,--background
 ion-textarea,css-prop,--border-radius

core/src/components.d.ts

@@ -4225,7 +4225,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the input loses focus.
          */
-        "onIonBlur"?: (event: CustomEvent<void>) => void;
+        "onIonBlur"?: (event: CustomEvent<FocusEvent>) => void;
         /**
           * Emitted when the value has changed.
          */
@@ -4233,7 +4233,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the input has focus.
          */
-        "onIonFocus"?: (event: CustomEvent<void>) => void;
+        "onIonFocus"?: (event: CustomEvent<FocusEvent>) => void;
         /**
           * Emitted when a keyboard input occurred.
          */
@@ -5749,7 +5749,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the input loses focus.
          */
-        "onIonBlur"?: (event: CustomEvent<void>) => void;
+        "onIonBlur"?: (event: CustomEvent<FocusEvent>) => void;
         /**
           * Emitted when the input value has changed.
          */
@@ -5757,7 +5757,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the input has focus.
          */
-        "onIonFocus"?: (event: CustomEvent<void>) => void;
+        "onIonFocus"?: (event: CustomEvent<FocusEvent>) => void;
         /**
           * Emitted when a keyboard input occurred.
          */

core/src/components/input/input.tsx

@@ -201,12 +201,12 @@ export class Input implements ComponentInterface {
   /**
    * Emitted when the input loses focus.
    */
-  @Event() ionBlur!: EventEmitter<void>;
+  @Event() ionBlur!: EventEmitter<FocusEvent>;
 
   /**
    * Emitted when the input has focus.
    */
-  @Event() ionFocus!: EventEmitter<void>;
+  @Event() ionFocus!: EventEmitter<FocusEvent>;
 
   /**
    * Emitted when the styles change.
@@ -293,20 +293,20 @@ export class Input implements ComponentInterface {
     this.ionInput.emit(ev as KeyboardEvent);
   }
 
-  private onBlur = () => {
+  private onBlur = (ev: FocusEvent) => {
     this.hasFocus = false;
     this.focusChanged();
     this.emitStyle();
 
-    this.ionBlur.emit();
+    this.ionBlur.emit(ev);
   }
 
-  private onFocus = () => {
+  private onFocus = (ev: FocusEvent) => {
     this.hasFocus = true;
     this.focusChanged();
     this.emitStyle();
 
-    this.ionFocus.emit();
+    this.ionFocus.emit(ev);
   }
 
   private onKeydown = (ev: KeyboardEvent) => {

core/src/components/input/readme.md

@@ -325,9 +325,9 @@ export class InputExample {
 
 | Event       | Description                             | Type                                  |
 | ----------- | --------------------------------------- | ------------------------------------- |
-| `ionBlur`   | Emitted when the input loses focus.     | `CustomEvent<void>`                   |
+| `ionBlur`   | Emitted when the input loses focus.     | `CustomEvent<FocusEvent>`             |
 | `ionChange` | Emitted when the value has changed.     | `CustomEvent<InputChangeEventDetail>` |
-| `ionFocus`  | Emitted when the input has focus.       | `CustomEvent<void>`                   |
+| `ionFocus`  | Emitted when the input has focus.       | `CustomEvent<FocusEvent>`             |
 | `ionInput`  | Emitted when a keyboard input occurred. | `CustomEvent<KeyboardEvent>`          |
 
 

core/src/components/input/test/basic/index.html

@@ -136,6 +136,7 @@
     </ion-content>
 
     <script>
+    document.querySelector('ion-input').addEventListener('ionBlur', (ev) => { console.log(ev)})
       function toggleBoolean(id, prop) {
         var el = document.getElementById(id);
 

core/src/components/textarea/readme.md

@@ -286,9 +286,9 @@ export class TextareaExample {
 
 | Event       | Description                               | Type                                     |
 | ----------- | ----------------------------------------- | ---------------------------------------- |
-| `ionBlur`   | Emitted when the input loses focus.       | `CustomEvent<void>`                      |
+| `ionBlur`   | Emitted when the input loses focus.       | `CustomEvent<FocusEvent>`                |
 | `ionChange` | Emitted when the input value has changed. | `CustomEvent<TextareaChangeEventDetail>` |
-| `ionFocus`  | Emitted when the input has focus.         | `CustomEvent<void>`                      |
+| `ionFocus`  | Emitted when the input has focus.         | `CustomEvent<FocusEvent>`                |
 | `ionInput`  | Emitted when a keyboard input occurred.   | `CustomEvent<KeyboardEvent>`             |
 
 

core/src/components/textarea/textarea.tsx

@@ -177,12 +177,12 @@ export class Textarea implements ComponentInterface {
   /**
    * Emitted when the input loses focus.
    */
-  @Event() ionBlur!: EventEmitter<void>;
+  @Event() ionBlur!: EventEmitter<FocusEvent>;
 
   /**
    * Emitted when the input has focus.
    */
-  @Event() ionFocus!: EventEmitter<void>;
+  @Event() ionFocus!: EventEmitter<FocusEvent>;
 
   connectedCallback() {
     this.emitStyle();
@@ -292,18 +292,18 @@ export class Textarea implements ComponentInterface {
     this.ionInput.emit(ev as KeyboardEvent);
   }
 
-  private onFocus = () => {
+  private onFocus = (ev: FocusEvent) => {
     this.hasFocus = true;
     this.focusChange();
 
-    this.ionFocus.emit();
+    this.ionFocus.emit(ev);
   }
 
-  private onBlur = () => {
+  private onBlur = (ev: FocusEvent) => {
     this.hasFocus = false;
     this.focusChange();
 
-    this.ionBlur.emit();
+    this.ionBlur.emit(ev);
   }
 
   private onKeyDown = () => {