fix(radio): fix keyboard focus css

packages/core/src/components/radio/radio.ios.scss

@@ -90,6 +90,27 @@ $radio-ios-item-end-margin-start:     ($item-ios-padding-start / 2) !default;
 }
 
 
+// iOS Radio: Keyboard Focus
+// -----------------------------------------
+
+.radio-key .radio-icon::after {
+  position: absolute;
+  top: -8px;
+  left: -9px;
+
+  display: block;
+
+  width: 36px;
+  height: 36px;
+
+  background: #86A8DF;
+  opacity: .3;
+
+  border-radius: 50%;
+  content: '';
+}
+
+
 // iOS Radio Within An Item
 // -----------------------------------------
 

packages/core/src/components/radio/radio.md.scss

@@ -124,6 +124,27 @@ $radio-md-item-end-margin-start:     0 !default;
 }
 
 
+// Material Design Radio: Keyboard Focus
+// -----------------------------------------
+
+.radio-key .radio-icon::after  {
+  position: absolute;
+  top: -12px;
+  left: -12px;
+
+  display: block;
+
+  width: 36px;
+  height: 36px;
+
+  background: #86A8DF;
+  opacity: .3;
+
+  border-radius: 50%;
+  content: '';
+}
+
+
 // Material Design Radio Within An Item
 // -----------------------------------------
 

packages/core/src/components/radio/radio.scss

@@ -24,23 +24,3 @@ ion-radio input {
   -moz-appearance: none;
   appearance: none;
 }
-
-.radio-outline {
-  display: none;
-}
-
-.radio-key .radio-outline {
-  position: absolute;
-  top: 5px;
-  left: 10px;
-
-  display: block;
-
-  width: 36px;
-  height: 36px;
-
-  background: #86A8DF;
-  opacity: .3;
-
-  border-radius: 50%;
-}

packages/core/src/components/radio/radio.tsx

@@ -1,5 +1,5 @@
 import { BlurEvent, CheckedInputChangeEvent, FocusEvent, RadioButtonInput, StyleEvent } from '../../utils/input-interfaces';
-import { Component, ComponentDidLoad, ComponentDidUnload, ComponentWillLoad, CssClassMap, Event, EventEmitter, Listen, Prop, PropDidChange, State } from '@stencil/core';
+import { Component, ComponentDidLoad, ComponentDidUnload, ComponentWillLoad, CssClassMap, Event, EventEmitter, Prop, PropDidChange, State } from '@stencil/core';
 import { createThemedClasses } from '../../utils/theme';
 
 
@@ -14,44 +14,14 @@ import { createThemedClasses } from '../../utils/theme';
   }
 })
 export class Radio implements RadioButtonInput, ComponentDidLoad, ComponentDidUnload, ComponentWillLoad {
-  didLoad: boolean;
+  private didLoad: boolean;
-  inputId: string;
+  private inputId: string;
-  nativeInput: HTMLInputElement;
+  private nativeInput: HTMLInputElement;
-  styleTmr: any;
+  private styleTmr: any;
 
 
   @State() keyFocus: boolean;
 
-  /**
-   * @output {RadioEvent} Emitted when the radio loads.
-   */
-  @Event() ionRadioDidLoad: EventEmitter;
-
-  /**
-   * @output {RadioEvent} Emitted when the radio unloads.
-   */
-  @Event() ionRadioDidUnload: EventEmitter;
-
-  /**
-   * @output {Event} Emitted when the styles change.
-   */
-  @Event() ionStyle: EventEmitter<StyleEvent>;
-
-  /**
-   * @output {Event} Emitted when the radio button is selected.
-   */
-  @Event() ionSelect: EventEmitter<CheckedInputChangeEvent>;
-
-  /**
-   * @output {Event} Emitted when the radio button has focus.
-   */
-  @Event() ionFocus: EventEmitter<FocusEvent>;
-
-  /**
-   * @output {Event} Emitted when the radio button loses focus.
-   */
-  @Event() ionBlur: EventEmitter<BlurEvent>;
-
   /**
    * @input {string} The color to use from your Sass `$colors` map.
    * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
@@ -85,6 +55,36 @@ export class Radio implements RadioButtonInput, ComponentDidLoad, ComponentDidUn
    */
   @Prop({ mutable: true }) value: string;
 
+  /**
+   * @output {RadioEvent} Emitted when the radio loads.
+   */
+  @Event() ionRadioDidLoad: EventEmitter;
+
+  /**
+   * @output {RadioEvent} Emitted when the radio unloads.
+   */
+  @Event() ionRadioDidUnload: EventEmitter;
+
+  /**
+   * @output {Event} Emitted when the styles change.
+   */
+  @Event() ionStyle: EventEmitter<StyleEvent>;
+
+  /**
+   * @output {Event} Emitted when the radio button is selected.
+   */
+  @Event() ionSelect: EventEmitter<CheckedInputChangeEvent>;
+
+  /**
+   * @output {Event} Emitted when the radio button has focus.
+   */
+  @Event() ionFocus: EventEmitter<FocusEvent>;
+
+  /**
+   * @output {Event} Emitted when the radio button loses focus.
+   */
+  @Event() ionBlur: EventEmitter<BlurEvent>;
+
 
   componentWillLoad() {
     this.inputId = 'ion-rb-' + (radioButtonIds++);
@@ -135,8 +135,8 @@ export class Radio implements RadioButtonInput, ComponentDidLoad, ComponentDidUn
   }
 
   @PropDidChange('disabled')
-  disabledChanged(val: boolean) {
+  disabledChanged(isDisabled: boolean) {
-    this.nativeInput.disabled = val;
+    this.nativeInput.disabled = isDisabled;
     this.emitStyle();
   }
 
@@ -153,7 +153,8 @@ export class Radio implements RadioButtonInput, ComponentDidLoad, ComponentDidUn
   }
 
   onChange() {
-    this.onClick();
+    this.checked = true;
+    this.nativeInput.focus();
   }
 
   onKeyUp() {
@@ -169,14 +170,6 @@ export class Radio implements RadioButtonInput, ComponentDidLoad, ComponentDidUn
     this.ionBlur.emit();
   }
 
-  @Listen('click')
-  onClick() {
-    if (!this.checked && !this.disabled) {
-      this.checked = true;
-      this.nativeInput.focus();
-    }
-  }
-
   hostData() {
     const hostAttrs: any = {
       'class': {
@@ -198,7 +191,6 @@ export class Radio implements RadioButtonInput, ComponentDidLoad, ComponentDidUn
       <div class={radioClasses}>
         <div class='radio-inner'/>
       </div>,
-      <div class='radio-outline'/>,
       <input
         type='radio'
         onChange={this.onChange.bind(this)}