fix(searchbar): fix crash on cancel event (#16181)

fixes #16143
This commit is contained in:
Manu MA
2018-11-01 18:17:28 +01:00
committed by GitHub
parent fce30ebc06
commit 9c79d9856f

View File

@ -14,7 +14,7 @@ import { createColorClasses } from '../../utils/theme';
}) })
export class Searchbar implements ComponentInterface { export class Searchbar implements ComponentInterface {
private nativeInput!: HTMLInputElement; private nativeInput?: HTMLInputElement;
private isCancelVisible = false; private isCancelVisible = false;
private shouldAlignLeft = true; private shouldAlignLeft = true;
@ -164,8 +164,10 @@ export class Searchbar implements ComponentInterface {
*/ */
@Method() @Method()
setFocus() { setFocus() {
if (this.nativeInput) {
this.nativeInput.focus(); this.nativeInput.focus();
} }
}
/** /**
* Clears the input field and triggers the control change. * Clears the input field and triggers the control change.
@ -202,8 +204,10 @@ export class Searchbar implements ComponentInterface {
this.ionCancel.emit(); this.ionCancel.emit();
this.onClearInput(); this.onClearInput();
if (this.nativeInput) {
this.nativeInput.blur(); this.nativeInput.blur();
} }
}
/** /**
* Update the Searchbar input value when the input changes * Update the Searchbar input value when the input changes
@ -262,8 +266,11 @@ export class Searchbar implements ComponentInterface {
* Positions the input placeholder * Positions the input placeholder
*/ */
private positionPlaceholder() { private positionPlaceholder() {
const isRTL = this.doc.dir === 'rtl';
const inputEl = this.nativeInput; const inputEl = this.nativeInput;
if (!inputEl) {
return;
}
const isRTL = this.doc.dir === 'rtl';
const iconEl = (this.el.shadowRoot || this.el).querySelector('.searchbar-search-icon') as HTMLElement; const iconEl = (this.el.shadowRoot || this.el).querySelector('.searchbar-search-icon') as HTMLElement;
if (this.shouldAlignLeft) { if (this.shouldAlignLeft) {