javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-16 10:01:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
resolves #17363
This commit is contained in:
Liam DeBeasi
2020-07-17 17:43:17 -04:00
committed by GitHub
parent 77464ef21a
commit a625c837a6
7 changed files with 25 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
core/api.txt
View File

@ -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

8
core/src/components.d.ts vendored
View File

@ -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.
*/

12
core/src/components/input/input.tsx
View File

@ -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) => {

4
core/src/components/input/readme.md
View File

@ -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>` |

1
core/src/components/input/test/basic/index.html
View File

@ -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);

4
core/src/components/textarea/readme.md
View File

@ -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>` |

12
core/src/components/textarea/textarea.tsx
View File

@ -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 = () => {