javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 11:17:19 +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

2
core/src/components/fab-button/fab-button.ios.scss
View File

@ -64,7 +64,7 @@
background: #{current-color(base, $fab-ios-translucent-background-color-alpha)};
}
:host(.ion-color.focused.fab-button-translucent) .button-native,
:host(.ion-color.ion-focused.fab-button-translucent) .button-native,
:host(.ion-color.activated.fab-button-translucent) .button-native {
background: #{current-color(base)};
}

4
core/src/components/fab-button/fab-button.scss
View File

@ -67,7 +67,7 @@
}
// Focused/Activated Button with Color
:host(.ion-color.focused) .button-native,
:host(.ion-color.ion-focused) .button-native,
:host(.ion-color.activated) .button-native {
background: #{current-color(shade)};
color: #{current-color(contrast)};
@ -147,7 +147,7 @@
}
// Focused Button
:host(.focused) .button-native {
:host(.ion-focused) .button-native {
background: var(--background-focused);
color: var(--color-focused);
}

14
core/src/components/fab-button/fab-button.tsx
View File

@ -1,4 +1,4 @@
import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, State } from '@stencil/core';
import { Component, ComponentInterface, Element, Event, EventEmitter, Prop } from '@stencil/core';
import { Color, Mode, RouterDirection } from '../../interface';
import { createColorClasses, hostContext, openURL } from '../../utils/theme';
@ -14,8 +14,6 @@ import { createColorClasses, hostContext, openURL } from '../../utils/theme';
export class FabButton implements ComponentInterface {
@Element() el!: HTMLElement;
@State() keyFocus = false;
@Prop({ context: 'window' }) win!: Window;
/**
@ -86,17 +84,12 @@ export class FabButton implements ComponentInterface {
this.ionFocus.emit();
}
private onKeyUp = () => {
this.keyFocus = true;
}
private onBlur = () => {
this.keyFocus = false;
this.ionBlur.emit();
}
hostData() {
const { el, disabled, color, activated, show, translucent, size, keyFocus } = this;
const { el, disabled, color, activated, show, translucent, size } = this;
const inList = hostContext('ion-fab-list', el);
return {
'aria-disabled': disabled ? 'true' : null,
@ -109,7 +102,7 @@ export class FabButton implements ComponentInterface {
'fab-button-disabled': disabled,
'fab-button-translucent': translucent,
'ion-activatable': true,
'focused': keyFocus,
'ion-focusable': true,
[`fab-button-${size}`]: size !== undefined,
}
};
@ -127,7 +120,6 @@ export class FabButton implements ComponentInterface {
class="button-native"
disabled={this.disabled}
onFocus={this.onFocus}
onKeyUp={this.onKeyUp}
onBlur={this.onBlur}
onClick={(ev: Event) => openURL(this.win, this.href, ev, this.routerDirection)}
>