mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-17 10:41:13 +08:00
fix(all): component reusage (#18963)
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:
@ -1,4 +1,4 @@
|
||||
import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Method, Prop, State, Watch, h, readTask } from '@stencil/core';
|
||||
import { Build, Component, ComponentInterface, Element, Event, EventEmitter, Host, Method, Prop, State, Watch, h, readTask } from '@stencil/core';
|
||||
|
||||
import { getIonMode } from '../../global/ionic-global';
|
||||
import { Color, StyleEventDetail, TextareaChangeEventDetail } from '../../interface';
|
||||
@ -169,28 +169,26 @@ export class Textarea implements ComponentInterface {
|
||||
*/
|
||||
@Event() ionFocus!: EventEmitter<void>;
|
||||
|
||||
/**
|
||||
* Emitted when the input has been created.
|
||||
* @internal
|
||||
*/
|
||||
@Event() ionInputDidLoad!: EventEmitter<void>;
|
||||
|
||||
/**
|
||||
* Emitted when the input has been removed.
|
||||
* @internal
|
||||
*/
|
||||
@Event() ionInputDidUnload!: EventEmitter<void>;
|
||||
|
||||
componentWillLoad() {
|
||||
connectedCallback() {
|
||||
this.emitStyle();
|
||||
this.debounceChanged();
|
||||
if (Build.isBrowser) {
|
||||
this.el.dispatchEvent(new CustomEvent('ionInputDidLoad', {
|
||||
detail: this.el
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
if (Build.isBrowser) {
|
||||
document.dispatchEvent(new CustomEvent('ionInputDidUnload', {
|
||||
detail: this.el
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
componentDidLoad() {
|
||||
this.debounceChanged();
|
||||
|
||||
this.runAutoGrow();
|
||||
|
||||
this.ionInputDidLoad.emit();
|
||||
}
|
||||
|
||||
// TODO: performance hit, this cause layout thrashing
|
||||
@ -204,10 +202,6 @@ export class Textarea implements ComponentInterface {
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUnload() {
|
||||
this.ionInputDidUnload.emit();
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets focus on the specified `ion-textarea`. Use this method instead of the global
|
||||
* `input.focus()`.
|
||||
|
Reference in New Issue
Block a user