trigger tapInput mouseEvent on label click

This commit is contained in:
Tim Lancina
2015-07-17 17:27:57 -05:00
parent a62b81a102
commit 1c5172bb5e
4 changed files with 50 additions and 32 deletions

View File

@@ -19,7 +19,7 @@ import {Icon} from '../icon/icon';
host: {
'[class.item]': 'item',
'[attr.aria-checked]': 'input.checked',
'(^click)': 'onClick($event)'
// '(^click)': 'onClick($event)'
},
defaultProperties: {
'iconOff': 'ion-ios-circle-outline',
@@ -45,23 +45,32 @@ export class Checkbox extends IonInputItem {
this.item = true;
}
onClick(ev) {
// toggling with spacebar fires mouse event
if (ev.target.tagName === "INPUT") return;
this.input.checked = !this.input.checked;
//TODO trigger change/mouse event on the actual input to trigger
// form updates
// this._checkbox.dispatchEvent(e);
//this._checkboxDir.control.valueAccessor.writeValue(val);
}
// onClick(ev) {
// debugger
// // toggling with spacebar fires mouse event
// if (ev.target.tagName === "INPUT") return;
//
// this.input.checked = !this.input.checked;
//
// //TODO trigger change/mouse event on the actual input to trigger
// // form updates
//
// // this._checkbox.dispatchEvent(e);
// //this._checkboxDir.control.valueAccessor.writeValue(val);
// }
onChangeEvent(input) {
//TODO can we just assume this will always be true?
this.input.checked = this.input.elementRef.nativeElement.checked;
}
focus() {
let mouseClick = new MouseEvent("click", {
bubbles: true,
cancelable: true,
});
this.input && this.input.elementRef.nativeElement.dispatchEvent(mouseClick);
}
}

View File

@@ -33,6 +33,7 @@ export class Label {
}
this.scrollAssist = config.setting('keyboardScrollAssist');
this.scrollAssist = true;
}
pointerStart(ev) {

View File

@@ -39,7 +39,7 @@ $radio-padding: 0 15px !default;
}
}
.radio .item-media,
.radio .item-content {
pointer-events: none;
}
// .radio .item-media,
// .radio .item-content {
// pointer-events: none;
// }

View File

@@ -26,7 +26,7 @@ export class RadioGroup extends Ion {
this.list = true;
}
register(radioButton) {
registerButton(radioButton) {
this.buttons.push(radioButton);
let inputEl = radioButton.input.elementRef.nativeElement;
if (!inputEl.hasAttribute('name')) {
@@ -51,7 +51,7 @@ export class RadioGroup extends Ion {
'[class.item]': 'item',
'[class.active]': 'input.checked',
'[attr.aria-checked]': 'input.checked',
'(^click)': 'onClick($event)'
// '(^click)': 'onClick($event)'
},
defaultProperties: {
'iconOff': 'ion-ios-circle-outline',
@@ -81,22 +81,30 @@ export class RadioButton extends IonInputItem {
registerInput(input) {
this.input = input;
this.group.register(this);
this.group.registerButton(this);
}
onClick(ev) {
// switching between radio buttons with arrow keys fires a MouseEvent
if (ev.target.tagName === "INPUT") return;
this.input.checked = !this.input.checked;
// onClick(ev) {
// // switching between radio buttons with arrow keys fires a MouseEvent
// if (ev.target.tagName === "INPUT") return;
// this.input.checked = !this.input.checked;
//
// //let bindings update first
// setTimeout(() => this.group.update(this.input));
//
// //TODO figure out a way to trigger change on the actual input to trigger
// // form updates
//
// // this._checkbox.dispatchEvent(e);
// //this._checkboxDir.control.valueAccessor.writeValue(val);
// }
//let bindings update first
setTimeout(() => this.group.update(this.input));
//TODO figure out a way to trigger change on the actual input to trigger
// form updates
// this._checkbox.dispatchEvent(e);
//this._checkboxDir.control.valueAccessor.writeValue(val);
focus() {
let mouseClick = new MouseEvent("click", {
bubbles: true,
cancelable: true,
});
this.input && this.input.elementRef.nativeElement.dispatchEvent(mouseClick);
}
onChangeEvent(input) {