javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 11:41:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(all): component reusage (#18963)

Browse Source 
Use new stencil APIs to allow ionic elements to be reused once removed from the DOM.

fixes #18843
fixes #17344
fixes #16453
fixes #15879
fixes #15788
fixes #15484
fixes #17890
fixes #16364
This commit is contained in:
Manu MA
2019-08-27 16:29:37 +02:00
committed by GitHub
parent a65d897214
commit 48a27636c7
33 changed files with 411 additions and 368 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Method, Prop, State, Watch, h } from '@stencil/core';
import { Build, Component, ComponentInterface, Element, Event, EventEmitter, Host, Method, Prop, State, Watch, h } from '@stencil/core';
import { getIonMode } from '../../global/ionic-global';
import { Color, InputChangeEventDetail, StyleEventDetail, TextFieldTypes } from '../../interface';
@ -66,7 +66,7 @@ export class Input implements ComponentInterface {
/**
* If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types.
*/
@Prop({ mutable: true }) clearOnEdit?: boolean;
@Prop() clearOnEdit?: boolean;
/**
* Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke.
@ -218,22 +218,22 @@ export class Input implements ComponentInterface {
*/
@Event() ionStyle!: EventEmitter<StyleEventDetail>;
componentWillLoad() {
// By default, password inputs clear after focus when they have content
if (this.clearOnEdit === undefined && this.type === 'password') {
this.clearOnEdit = true;
}
connectedCallback() {
this.emitStyle();
}
componentDidLoad() {
this.debounceChanged();
this.ionInputDidLoad.emit();
if (Build.isBrowser) {
this.el.dispatchEvent(new CustomEvent('ionInputDidLoad', {
detail: this.el
}));
}
}
componentDidUnload() {
this.ionInputDidUnload.emit();
disconnectedCallback() {
if (Build.isBrowser) {
document.dispatchEvent(new CustomEvent('ionInputDidUnload', {
detail: this.el
}));
}
}
/**
@ -255,6 +255,13 @@ export class Input implements ComponentInterface {
return Promise.resolve(this.nativeInput!);
}
private shouldClearOnEdit() {
const { type, clearOnEdit } = this;
return (clearOnEdit === undefined)
? type === 'password'
: clearOnEdit;
}
private getValue(): string {
return this.value || '';
}
@ -295,7 +302,7 @@ export class Input implements ComponentInterface {
}
private onKeydown = () => {
if (this.clearOnEdit) {
if (this.shouldClearOnEdit()) {
// Did the input value change after it was blurred and edited?
if (this.didBlurAfterEdit && this.hasValue()) {
// Clear the input
@ -327,7 +334,7 @@ export class Input implements ComponentInterface {
private focusChanged() {
// If clearOnEdit is enabled and the input blurred but has a value, set a flag
if (this.clearOnEdit && !this.hasFocus && this.hasValue()) {
if (!this.hasFocus && this.shouldClearOnEdit() && this.hasValue()) {
this.didBlurAfterEdit = true;
}
}