From dd4cb706ffeebc2069645ea03f0e7a96d6b14d43 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Wed, 13 May 2020 12:18:03 -0400 Subject: [PATCH] fix(input): check for tabindex and pass it properly to native input (#21170) * fix(input): check for tabindex and pass it properly to native input references #17515 * style(input): fix lint error * test(input): update test for more use cases (inside item) * fix(item): adds delegatesFocus to shadow * style(input): add comment block on what the code does --- core/src/components/input/input.tsx | 27 +++++-- .../components/input/test/tabindex/index.html | 76 +++++++++++++++++++ core/src/components/item/item.tsx | 4 +- 3 files changed, 99 insertions(+), 8 deletions(-) create mode 100644 core/src/components/input/test/tabindex/index.html diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx index 73f270aa0d..b8edf18af8 100644 --- a/core/src/components/input/input.tsx +++ b/core/src/components/input/input.tsx @@ -21,6 +21,7 @@ export class Input implements ComponentInterface { private nativeInput?: HTMLInputElement; private inputId = `ion-input-${inputIds++}`; private didBlurAfterEdit = false; + private tabindex?: string | number; @State() hasFocus = false; @@ -88,13 +89,6 @@ export class Input implements ComponentInterface { this.emitStyle(); } - /** - * A hint to the browser for which keyboard to display. - * Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, - * `"email"`, `"numeric"`, `"decimal"`, and `"search"`. - */ - @Prop() inputmode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'; - /** * A hint to the browser for which enter key to display. * Possible values: `"enter"`, `"done"`, `"go"`, `"next"`, @@ -102,6 +96,13 @@ export class Input implements ComponentInterface { */ @Prop() enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'; + /** + * A hint to the browser for which keyboard to display. + * Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, + * `"email"`, `"numeric"`, `"decimal"`, and `"search"`. + */ + @Prop() inputmode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'; + /** * The maximum value, which must not be less than its minimum (min attribute) value. */ @@ -213,6 +214,17 @@ export class Input implements ComponentInterface { */ @Event() ionStyle!: EventEmitter; + componentWillLoad() { + // If the ion-input has a tabindex attribute we get the value + // and pass it down to the native input, then remove it from the + // ion-input to avoid causing tabbing twice on the same element + if (this.el.hasAttribute('tabindex')) { + const tabindex = this.el.getAttribute('tabindex'); + this.tabindex = tabindex !== null ? tabindex : undefined; + this.el.removeAttribute('tabindex'); + } + } + connectedCallback() { this.emitStyle(); this.debounceChanged(); @@ -384,6 +396,7 @@ export class Input implements ComponentInterface { spellCheck={this.spellcheck} step={this.step} size={this.size} + tabindex={this.tabindex} type={this.type} value={value} onInput={this.onInput} diff --git a/core/src/components/input/test/tabindex/index.html b/core/src/components/input/test/tabindex/index.html new file mode 100644 index 0000000000..9a6223e722 --- /dev/null +++ b/core/src/components/input/test/tabindex/index.html @@ -0,0 +1,76 @@ + + + + + + Input - Tabindex + + + + + + + + + + + + + Input - Tabindex + + + + + + + + + + + + +
+ + + + +
Tab 11th
+ + + + + Tab 4th + + + + Tab 3rd + + + + Skip + + + + Tab 2nd + + + + Tab 1st + + + + + + + + + diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx index c606d3cd48..6e69971e80 100644 --- a/core/src/components/item/item.tsx +++ b/core/src/components/item/item.tsx @@ -20,7 +20,9 @@ import { createColorClasses, hostContext, openURL } from '../../utils/theme'; ios: 'item.ios.scss', md: 'item.md.scss' }, - shadow: true + shadow: { + delegatesFocus: true + } }) export class Item implements ComponentInterface, AnchorInterface, ButtonInterface {