fix(all): avoid using focus() since it conflicts with HTMLElement

fixes #15810

Author: manucorporat

angular/src/directives/proxies.ts

@@ -356,7 +356,7 @@ export class Input {
 
   constructor(r: ElementRef) {
     const el = r.nativeElement;
-    proxyMethods(this, el, ['focus']);
+    proxyMethods(this, el, ['setFocus']);
     proxyInputs(this, el, ['color', 'mode', 'accept', 'autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'debounce', 'disabled', 'inputmode', 'max', 'maxlength', 'min', 'minlength', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'results', 'spellcheck', 'step', 'size', 'type', 'value']);
     proxyOutputs(this, el, ['ionInput', 'ionChange', 'ionStyle', 'ionBlur', 'ionFocus', 'ionInputDidLoad', 'ionInputDidUnload']);
   }
@@ -654,7 +654,7 @@ export class Searchbar {
 
   constructor(r: ElementRef) {
     const el = r.nativeElement;
-    proxyMethods(this, el, ['focus']);
+    proxyMethods(this, el, ['setFocus']);
     proxyInputs(this, el, ['color', 'mode', 'animated', 'autocomplete', 'autocorrect', 'cancelButtonIcon', 'cancelButtonText', 'clearIcon', 'debounce', 'placeholder', 'searchIcon', 'showCancelButton', 'spellcheck', 'type', 'value']);
     proxyOutputs(this, el, ['ionInput', 'ionChange', 'ionCancel', 'ionClear', 'ionBlur', 'ionFocus']);
   }
@@ -857,7 +857,7 @@ export class Textarea {
 
   constructor(r: ElementRef) {
     const el = r.nativeElement;
-    proxyMethods(this, el, ['focus']);
+    proxyMethods(this, el, ['setFocus']);
     proxyInputs(this, el, ['mode', 'color', 'autocapitalize', 'autofocus', 'clearOnEdit', 'debounce', 'disabled', 'maxlength', 'minlength', 'name', 'placeholder', 'readonly', 'required', 'spellcheck', 'cols', 'rows', 'wrap', 'value']);
     proxyOutputs(this, el, ['ionChange', 'ionInput', 'ionStyle', 'ionBlur', 'ionFocus']);
   }

core/src/components.d.ts

@@ -1733,7 +1733,6 @@ export namespace Components {
     * If true, the user cannot interact with the input. Defaults to `false`.
     */
     'disabled': boolean;
-    'focus': () => void;
     /**
     * A hint to the browser for which keyboard to display. This attribute applies when the value of the type attribute is `"text"`, `"password"`, `"email"`, or `"url"`. Possible values are: `"verbatim"`, `"latin"`, `"latin-name"`, `"latin-prose"`, `"full-width-latin"`, `"kana"`, `"katakana"`, `"numeric"`, `"tel"`, `"email"`, `"url"`.
     */
@@ -1786,6 +1785,7 @@ export namespace Components {
     * This is a nonstandard attribute supported by Safari that only applies when the type is `"search"`. Its value should be a nonnegative decimal integer.
     */
     'results'?: number;
+    'setFocus': () => void;
     /**
     * The initial size of the control. This value is in pixels unless the value of the type attribute is `"text"` or `"password"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, or `"password"`, otherwise it is ignored.
     */
@@ -3713,7 +3713,6 @@ export namespace Components {
     * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. Default `250`.
     */
     'debounce': number;
-    'focus': () => void;
     /**
     * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
     */
@@ -3726,6 +3725,7 @@ export namespace Components {
     * The icon to use as the search icon. Defaults to `"search"`.
     */
     'searchIcon'?: string;
+    'setFocus': () => void;
     /**
     * If true, show the cancel button. Default `false`.
     */
@@ -4729,7 +4729,6 @@ export namespace Components {
     * If true, the user cannot interact with the textarea. Defaults to `false`.
     */
     'disabled': boolean;
-    'focus': () => void;
     /**
     * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.
     */
@@ -4762,6 +4761,7 @@ export namespace Components {
     * The number of visible text lines for the control.
     */
     'rows'?: number;
+    'setFocus': () => void;
     /**
     * If true, the element will have its spelling and grammar checked. Defaults to `false`.
     */

core/src/components/input/input.tsx

@@ -245,7 +245,7 @@ export class Input implements ComponentInterface {
   }
 
   @Method()
-  focus() {
+  setFocus() {
     if (this.nativeInput) {
       this.nativeInput.focus();
     }

core/src/components/input/readme.md

@@ -57,9 +57,9 @@ It is meant for text `type` inputs only, such as `"text"`, `"password"`, `"email
 
 ## Methods
 
-| Method  | Description |
-| ------- | ----------- |
-| `focus` |             |
+| Method     | Description |
+| ---------- | ----------- |
+| `setFocus` |             |
 
 
 ----------------------------------------------

core/src/components/searchbar/readme.md

@@ -44,9 +44,9 @@ A Searchbar should be used instead of an input to search lists. A clear button i
 
 ## Methods
 
-| Method  | Description |
-| ------- | ----------- |
-| `focus` |             |
+| Method     | Description |
+| ---------- | ----------- |
+| `setFocus` |             |
 
 
 ## CSS Custom Properties

core/src/components/searchbar/searchbar.tsx

@@ -141,7 +141,7 @@ export class Searchbar implements ComponentInterface {
   protected valueChanged() {
     const inputEl = this.nativeInput;
     const value = this.value;
-    if (inputEl.value !== value) {
+    if (inputEl && inputEl.value !== value) {
       inputEl.value = value;
     }
     this.ionChange.emit({ value });
@@ -153,8 +153,10 @@ export class Searchbar implements ComponentInterface {
   }
 
   @Method()
-  focus() {
-    this.nativeInput.focus();
+  setFocus() {
+    if (this.nativeInput) {
+      this.nativeInput.focus();
+    }
   }
 
   /**

core/src/components/textarea/readme.md

@@ -48,9 +48,9 @@ The textarea component accepts the [native textarea attributes](https://develope
 
 ## Methods
 
-| Method  | Description |
-| ------- | ----------- |
-| `focus` |             |
+| Method     | Description |
+| ---------- | ----------- |
+| `setFocus` |             |
 
 
 ## CSS Custom Properties

core/src/components/textarea/textarea.tsx

@@ -169,7 +169,7 @@ export class Textarea implements ComponentInterface {
   }
 
   @Method()
-  focus() {
+  setFocus() {
     if (this.nativeInput) {
       this.nativeInput.focus();
     }

core/src/global/config.ts

@@ -34,9 +34,6 @@ export class Config {
   }
 }
 
-const IONIC_PREFIX = 'ionic:';
-const IONIC_SESSION_KEY = 'ionic-persist-config';
-
 export function configFromSession(): any {
   try {
     const configStr = window.sessionStorage.getItem(IONIC_SESSION_KEY);
@@ -73,3 +70,6 @@ export function configFromURL() {
 function startsWith(input: string, search: string): boolean {
   return input.substr(0, search.length) === search;
 }
+
+const IONIC_PREFIX = 'ionic:';
+const IONIC_SESSION_KEY = 'ionic-persist-config';

core/src/utils/overlays-interface.ts

@@ -43,7 +43,9 @@ export interface HTMLIonOverlayElement extends HTMLStencilElement {
   dismiss(data?: any, role?: string): Promise<boolean>;
 }
 
+// TODO: uncomment when TS 3.0 issues are fixed
 // Overlay checks
+/*
 export type Conforms<T extends Required<B>, B> = T;
 export type HTMLOverlaysElement =
   Conforms<Required<HTMLIonModalElement>, ModalOptions> |
@@ -53,3 +55,4 @@ export type HTMLOverlaysElement =
   Conforms<Required<HTMLIonPopoverElement>, PopoverOptions> |
   Conforms<Required<HTMLIonPickerElement>, PickerOptions> |
   Conforms<Required<HTMLIonLoadingElement>, LoadingOptions>;
+*/