javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 04:14:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(inputs): keyboard focus improvements (#16838)

Browse Source 
fixes #16815
fixes #16872
fixes #13978
fixes #16610
This commit is contained in:
Manu MA
2019-01-11 19:36:02 +01:00
committed by GitHub
parent 275d385c17
commit 6364e4e2a1
38 changed files with 263 additions and 234 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
core/src/components/checkbox/checkbox.ios.scss
View File

@ -31,26 +31,6 @@
}
// iOS Checkbox Keyboard Focus
// -----------------------------------------
:host(.checkbox-key) .checkbox-icon::after {
@include border-radius(50%);
@include position(-9px, null, null, -9px);
display: block;
position: absolute;
width: 36px;
height: 36px;
background: $checkbox-ios-background-color-focused;
content: "";
opacity: .2;
}
// iOS Checkbox Within An Item
// -----------------------------------------

21
core/src/components/checkbox/checkbox.md.scss
View File

@ -44,27 +44,6 @@
opacity: $checkbox-md-disabled-opacity;
}
// Material Design Checkbox Keyboard Focus
// -----------------------------------------
:host(.checkbox-key) .checkbox-icon::after {
@include border-radius(50%);
@include position(-12px, null, null, -12px);
display: block;
position: absolute;
width: 36px;
height: 36px;
background: $checkbox-md-background-color-focused;
content: "";
opacity: .2;
}
// Material Design Checkbox Within An Item
// -----------------------------------------

33
core/src/components/checkbox/checkbox.tsx
View File

@ -1,4 +1,4 @@
import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, State, Watch } from '@stencil/core';
import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Prop, Watch } from '@stencil/core';
import { CheckboxChangeEventDetail, Color, Mode, StyleEventDetail } from '../../interface';
import { findItemLabel, renderHiddenInput } from '../../utils/helpers';
@ -18,8 +18,6 @@ export class Checkbox implements ComponentInterface {
@Element() el!: HTMLElement;
@State() keyFocus = false;
/**
* The color to use from your application's color palette.
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
@ -98,40 +96,36 @@ export class Checkbox implements ComponentInterface {
});
}
private onClick = () => {
@Listen('click')
onClick() {
this.checked = !this.checked;
}
private onKeyUp = () => {
this.keyFocus = true;
}
private onFocus = () => {
this.ionFocus.emit();
}
private onBlur = () => {
this.keyFocus = false;
this.ionBlur.emit();
}
hostData() {
const labelId = this.inputId + '-lbl';
const label = findItemLabel(this.el);
const { inputId, disabled, checked, color, el } = this;
const labelId = inputId + '-lbl';
const label = findItemLabel(el);
if (label) {
label.id = labelId;
}
return {
'role': 'checkbox',
'aria-disabled': this.disabled ? 'true' : null,
'aria-checked': `${this.checked}`,
'aria-disabled': disabled ? 'true' : null,
'aria-checked': `${checked}`,
'aria-labelledby': labelId,
class: {
...createColorClasses(this.color),
'in-item': hostContext('ion-item', this.el),
'checkbox-checked': this.checked,
'checkbox-disabled': this.disabled,
'checkbox-key': this.keyFocus,
...createColorClasses(color),
'in-item': hostContext('ion-item', el),
'checkbox-checked': checked,
'checkbox-disabled': disabled,
'interactive': true
}
};
@ -149,10 +143,9 @@ export class Checkbox implements ComponentInterface {
</svg>,
<button
type="button"
onClick={this.onClick}
onKeyUp={this.onKeyUp}
onFocus={this.onFocus}
onBlur={this.onBlur}
disabled={this.disabled}
>
</button>
];