diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 045812b6c7..b3878a8093 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -869,6 +869,10 @@ export namespace Components {
* A hint to the browser for which enter key to display. Possible values: `"enter"`, `"done"`, `"go"`, `"next"`, `"previous"`, `"search"`, and `"send"`.
*/
"enterkeyhint"?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
+ /**
+ * This is required for a WebKit bug which requires us to blur and focus an input to properly focus the input in an item with delegatesFocus. It will no longer be needed with iOS 14.
+ */
+ "fireFocusEvents": boolean;
/**
* Returns the native `` element used under the hood.
*/
@@ -922,7 +926,11 @@ export namespace Components {
*/
"required": boolean;
/**
- * Sets focus on the specified `ion-input`. Use this method instead of the global `input.focus()`.
+ * Sets blur on the native `input` in `ion-input`. Use this method instead of the global `input.blur()`.
+ */
+ "setBlur": () => Promise;
+ /**
+ * Sets focus on the native `input` in `ion-input`. Use this method instead of the global `input.focus()`.
*/
"setFocus": () => Promise;
/**
@@ -4190,6 +4198,10 @@ declare namespace LocalJSX {
* A hint to the browser for which enter key to display. Possible values: `"enter"`, `"done"`, `"go"`, `"next"`, `"previous"`, `"search"`, and `"send"`.
*/
"enterkeyhint"?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
+ /**
+ * This is required for a WebKit bug which requires us to blur and focus an input to properly focus the input in an item with delegatesFocus. It will no longer be needed with iOS 14.
+ */
+ "fireFocusEvents"?: boolean;
/**
* A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
*/
diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx
index 261fbaadc4..6d55057083 100644
--- a/core/src/components/input/input.tsx
+++ b/core/src/components/input/input.tsx
@@ -23,6 +23,16 @@ export class Input implements ComponentInterface {
private didBlurAfterEdit = false;
private tabindex?: string | number;
+ /**
+ * This is required for a WebKit bug which requires us to
+ * blur and focus an input to properly focus the input in
+ * an item with delegatesFocus. It will no longer be needed
+ * with iOS 14.
+ *
+ * @internal
+ */
+ @Prop() fireFocusEvents = true;
+
@State() hasFocus = false;
@Element() el!: HTMLElement;
@@ -244,7 +254,7 @@ export class Input implements ComponentInterface {
}
/**
- * Sets focus on the specified `ion-input`. Use this method instead of the global
+ * Sets focus on the native `input` in `ion-input`. Use this method instead of the global
* `input.focus()`.
*/
@Method()
@@ -254,6 +264,18 @@ export class Input implements ComponentInterface {
}
}
+ /**
+ * Sets blur on the native `input` in `ion-input`. Use this method instead of the global
+ * `input.blur()`.
+ * @internal
+ */
+ @Method()
+ async setBlur() {
+ if (this.nativeInput) {
+ this.nativeInput.blur();
+ }
+ }
+
/**
* Returns the native `` element used under the hood.
*/
@@ -298,7 +320,9 @@ export class Input implements ComponentInterface {
this.focusChanged();
this.emitStyle();
- this.ionBlur.emit(ev);
+ if (this.fireFocusEvents) {
+ this.ionBlur.emit(ev);
+ }
}
private onFocus = (ev: FocusEvent) => {
@@ -306,7 +330,9 @@ export class Input implements ComponentInterface {
this.focusChanged();
this.emitStyle();
- this.ionFocus.emit(ev);
+ if (this.fireFocusEvents) {
+ this.ionFocus.emit(ev);
+ }
}
private onKeydown = (ev: KeyboardEvent) => {
diff --git a/core/src/components/input/readme.md b/core/src/components/input/readme.md
index 015cf211d7..b54fb9d80a 100644
--- a/core/src/components/input/readme.md
+++ b/core/src/components/input/readme.md
@@ -345,7 +345,7 @@ Type: `Promise`
### `setFocus() => Promise`
-Sets focus on the specified `ion-input`. Use this method instead of the global
+Sets focus on the native `input` in `ion-input`. Use this method instead of the global
`input.focus()`.
#### Returns
diff --git a/core/src/components/input/test/tabindex/index.html b/core/src/components/input/test/tabindex/index.html
index 9a6223e722..3c569bc1d5 100644
--- a/core/src/components/input/test/tabindex/index.html
+++ b/core/src/components/input/test/tabindex/index.html
@@ -57,6 +57,7 @@
Tab 1st
+
@@ -69,6 +70,11 @@
.md div {
padding-left: 8px;
}
+
+ ion-item {
+ --background: #f6f6f6;
+ --padding-start: 40px;
+ }