diff --git a/ionic/components/form/form.ts b/ionic/components/form/form.ts index 933f8aab79..0e3a70784c 100644 --- a/ionic/components/form/form.ts +++ b/ionic/components/form/form.ts @@ -108,11 +108,10 @@ export class IonInputItem extends Ion { itemRegistry.push(this); } - onInit() { + onIonInit() { if (this.input && this.label) { this.input.id = (this.input.id || 'input-' + this.id); - this.label.id = (this.label.id || 'label-' + this.id); - this.input.labelledBy = this.label.id; + this.label.labelFor = this.input.id; } } diff --git a/ionic/components/form/label.scss b/ionic/components/form/label.scss index 0d3ea9ca97..b2c3cac5f8 100644 --- a/ionic/components/form/label.scss +++ b/ionic/components/form/label.scss @@ -14,8 +14,6 @@ $input-label-color: #000 !default; color: $input-label-color; font-size: 1.6rem; white-space: nowrap; - - pointer-events: none; } .placeholder-icon { diff --git a/ionic/components/form/label.ts b/ionic/components/form/label.ts index 215bb009a1..181ad0d3a2 100644 --- a/ionic/components/form/label.ts +++ b/ionic/components/form/label.ts @@ -7,8 +7,12 @@ import {IonicConfig} from '../../config/config'; @Directive({ selector: 'label', host: { - '[attr.id]': 'id', + '[attr.for]': 'labelFor', '[class.input-label]': 'inputLabel' + '(touchstart)': 'pointerStart($event)', + '(touchend)': 'pointerEnd($event)', + '(mousedown)': 'pointerStart($event)', + '(mouseup)': 'pointerEnd($event)' } }) export class Label { @@ -17,5 +21,35 @@ export class Label { container.registerLabel(this); this.inputLabel = true; } + this.container = container; + this.scrollAssist = config.setting('keyboardScrollAssist'); + } + + pointerStart(ev) { + if (this.scrollAssist) { + // remember where the touchstart/mousedown started + this.startCoord = dom.pointerCoord(ev); + } + } + + pointerEnd(ev) { + if (this.scrollAssist && this.container) { + + // get where the touchend/mouseup ended + let endCoord = dom.pointerCoord(ev); + + // focus this input if the pointer hasn't moved XX pixels + // and the input doesn't already have focus + console.log('!this.hasFocus()', !this.hasFocus()); + + if (!dom.hasPointerMoved(20, this.startCoord, endCoord)) { + ev.preventDefault(); + ev.stopPropagation(); + + this.container.focus(); + } + + this.startCoord null; + } } } diff --git a/ionic/components/form/text-input.ts b/ionic/components/form/text-input.ts index e1605ea4f7..3dce94acbb 100644 --- a/ionic/components/form/text-input.ts +++ b/ionic/components/form/text-input.ts @@ -38,8 +38,7 @@ export class Input extends IonInputItem { '(touchend)': 'pointerEnd($event)', '(mousedown)': 'pointerStart($event)', '(mouseup)': 'pointerEnd($event)', - '[attr.id]': 'id', - '[attr.aria-labelledby]': 'labelledBy' + '[attr.id]': 'id' } }) export class TextInput extends IonInput { @@ -81,7 +80,7 @@ export class TextInput extends IonInput { // and the input doesn't already have focus console.log('!this.hasFocus()', !this.hasFocus()); - if (this.startCoord && !dom.hasPointerMoved(20, this.startCoord, endCoord) && !this.hasFocus()) { + if (!dom.hasPointerMoved(20, this.startCoord, endCoord) && !this.hasFocus()) { ev.preventDefault(); ev.stopPropagation(); diff --git a/ionic/util/dom.ts b/ionic/util/dom.ts index 853cec991e..eb529c6be4 100644 --- a/ionic/util/dom.ts +++ b/ionic/util/dom.ts @@ -175,8 +175,8 @@ export function pointerCoord(ev) { } export function hasPointerMoved(tolerance, startCoord, endCoord) { - return Math.abs(startCoord.x - endCoord.x) > tolerance || - Math.abs(startCoord.y - endCoord.y) > tolerance; + return startCoord && endCoord && + (Math.abs(startCoord.x - endCoord.x) > tolerance || Math.abs(startCoord.y - endCoord.y) > tolerance); } export function hasFocus(ele) {