From 04bdc70afc324a03e168ada30f767eb213f5e3a8 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 25 Nov 2020 17:26:52 +0300
Subject: [PATCH] Fixed #606 - DataTable multiple click RadioButton focus
 previous row

---
 public/themes/arya-blue/theme.css               |  3 +++
 public/themes/arya-green/theme.css              |  3 +++
 public/themes/arya-orange/theme.css             |  3 +++
 public/themes/arya-purple/theme.css             |  3 +++
 public/themes/bootstrap4-dark-blue/theme.css    |  3 +++
 public/themes/bootstrap4-dark-purple/theme.css  |  3 +++
 public/themes/bootstrap4-light-blue/theme.css   |  3 +++
 public/themes/bootstrap4-light-purple/theme.css |  3 +++
 public/themes/fluent-light/theme.css            |  3 +++
 public/themes/luna-amber/theme.css              |  3 +++
 public/themes/luna-blue/theme.css               |  3 +++
 public/themes/luna-green/theme.css              |  3 +++
 public/themes/luna-pink/theme.css               |  3 +++
 public/themes/md-dark-deeppurple/theme.css      |  3 +++
 public/themes/md-dark-indigo/theme.css          |  3 +++
 public/themes/md-light-deeppurple/theme.css     |  3 +++
 public/themes/md-light-indigo/theme.css         |  3 +++
 public/themes/mdc-dark-deeppurple/theme.css     |  3 +++
 public/themes/mdc-dark-indigo/theme.css         |  3 +++
 public/themes/mdc-light-deeppurple/theme.css    |  3 +++
 public/themes/mdc-light-indigo/theme.css        |  3 +++
 public/themes/nova-accent/theme.css             |  3 +++
 public/themes/nova-alt/theme.css                |  3 +++
 public/themes/nova-vue/theme.css                |  3 +++
 public/themes/nova/theme.css                    |  3 +++
 public/themes/rhea/theme.css                    |  3 +++
 public/themes/saga-blue/theme.css               |  3 +++
 public/themes/saga-green/theme.css              |  3 +++
 public/themes/saga-orange/theme.css             |  3 +++
 public/themes/saga-purple/theme.css             |  3 +++
 public/themes/vela-blue/theme.css               |  3 +++
 public/themes/vela-green/theme.css              |  3 +++
 public/themes/vela-orange/theme.css             |  3 +++
 public/themes/vela-purple/theme.css             |  3 +++
 src/components/datatable/RowRadioButton.vue     | 10 ++--------
 35 files changed, 104 insertions(+), 8 deletions(-)

diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css
index bd3ca34ea..1f07716fb 100644
--- a/public/themes/arya-blue/theme.css
+++ b/public/themes/arya-blue/theme.css
@@ -1083,6 +1083,9 @@
 .p-radiobutton.p-error > .p-radiobutton-box, .p-radiobutton.p-invalid > .p-radiobutton-box {
   border-color: #ef9a9a;
 }
+.p-radiobutton:focus {
+  outline: 0 none;
+}
 
 .p-input-filled .p-radiobutton .p-radiobutton-box {
   background-color: #383838;
diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css
index 0d77fcd0d..bcf161068 100644
--- a/public/themes/arya-green/theme.css
+++ b/public/themes/arya-green/theme.css
@@ -1083,6 +1083,9 @@
 .p-radiobutton.p-error > .p-radiobutton-box, .p-radiobutton.p-invalid > .p-radiobutton-box {
   border-color: #ef9a9a;
 }
+.p-radiobutton:focus {
+  outline: 0 none;
+}
 
 .p-input-filled .p-radiobutton .p-radiobutton-box {
   background-color: #383838;
diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css
index fb10c07ed..62cbe56aa 100644
--- a/public/themes/arya-orange/theme.css
+++ b/public/themes/arya-orange/theme.css
@@ -1083,6 +1083,9 @@
 .p-radiobutton.p-error > .p-radiobutton-box, .p-radiobutton.p-invalid > .p-radiobutton-box {
   border-color: #ef9a9a;
 }
+.p-radiobutton:focus {
+  outline: 0 none;
+}
 
 .p-input-filled .p-radiobutton .p-radiobutton-box {
   background-color: #383838;
diff --git a/public/themes/arya-purple/theme.css b/public/themes/arya-purple/theme.css
index 5a3fee80c..d630006ff 100644
--- a/public/themes/arya-purple/theme.css
+++ b/public/themes/arya-purple/theme.css
@@ -1083,6 +1083,9 @@
 .p-radiobutton.p-error > .p-radiobutton-box, .p-radiobutton.p-invalid > .p-radiobutton-box {
   border-color: #ef9a9a;
 }
+.p-radiobutton:focus {
+  outline: 0 none;
+}
 
 .p-input-filled .p-radiobutton .p-radiobutton-box {
   background-color: #383838;
diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css
index 1bf7f843c..7d7dc0277 100644
--- a/public/themes/bootstrap4-dark-blue/theme.css
+++ b/public/themes/bootstrap4-dark-blue/theme.css
@@ -1087,6 +1087,9 @@
 .p-radiobutton.p-error > .p-radiobutton-box, .p-radiobutton.p-invalid > .p-radiobutton-box {
   border-color: #f19ea6;
 }
+.p-radiobutton:focus {
+  outline: 0 none;
+}
 
 .p-input-filled .p-radiobutton .p-radiobutton-box {
   background-color: #3f4b5b;
diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/public/themes/bootstrap4-dark-purple/theme.css
index 8431e0af8..1e1a170fe 100644
--- a/public/themes/bootstrap4-dark-purple/theme.css
+++ b/public/themes/bootstrap4-dark-purple/theme.css
@@ -1087,6 +1087,9 @@
 .p-radiobutton.p-error > .p-radiobutton-box, .p-radiobutton.p-invalid > .p-radiobutton-box {
   border-color: #f19ea6;
 }
+.p-radiobutton:focus {
+  outline: 0 none;
+}
 
 .p-input-filled .p-radiobutton .p-radiobutton-box {
   background-color: #3f4b5b;
diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css
index 04f059ee6..7d7a30b45 100644
--- a/public/themes/bootstrap4-light-blue/theme.css
+++ b/public/themes/bootstrap4-light-blue/theme.css
@@ -1087,6 +1087,9 @@
 .p-radiobutton.p-error > .p-radiobutton-box, .p-radiobutton.p-invalid > .p-radiobutton-box {
   border-color: #dc3545;
 }
+.p-radiobutton:focus {
+  outline: 0 none;
+}
 
 .p-input-filled .p-radiobutton .p-radiobutton-box {
   background-color: #efefef;
diff --git a/public/themes/bootstrap4-light-purple/theme.css b/public/themes/bootstrap4-light-purple/theme.css
index 07e57835f..a63e4237f 100644
--- a/public/themes/bootstrap4-light-purple/theme.css
+++ b/public/themes/bootstrap4-light-purple/theme.css
@@ -1087,6 +1087,9 @@
 .p-radiobutton.p-error > .p-radiobutton-box, .p-radiobutton.p-invalid > .p-radiobutton-box {
   border-color: #dc3545;
 }
+.p-radiobutton:focus {
+  outline: 0 none;
+}
 
 .p-input-filled .p-radiobutton .p-radiobutton-box {
   background-color: #efefef;
diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css
index 3ef111786..6c6829127 100644
--- a/public/themes/fluent-light/theme.css
+++ b/public/themes/fluent-light/theme.css
@@ -1083,6 +1083,9 @@
 .p-radiobutton.p-error > .p-radiobutton-box, .p-radiobutton.p-invalid > .p-radiobutton-box {
   border-color: #a4252c;
 }
+.p-radiobutton:focus {
+  outline: 0 none;
+}
 
 .p-input-filled .p-radiobutton .p-radiobutton-box {
   background-color: #faf9f8;
diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index 49820734b..8154407bb 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -1087,6 +1087,9 @@
 .p-radiobutton.p-error > .p-radiobutton-box, .p-radiobutton.p-invalid > .p-radiobutton-box {
   border-color: #e57373;
 }
+.p-radiobutton:focus {
+  outline: 0 none;
+}
 
 .p-input-filled .p-radiobutton .p-radiobutton-box {
   background-color: #4b4b4b;
diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css
index 0ad81710e..409c4a4e0 100644
--- a/public/themes/luna-blue/theme.css
+++ b/public/themes/luna-blue/theme.css
@@ -1087,6 +1087,9 @@
 .p-radiobutton.p-error > .p-radiobutton-box, .p-radiobutton.p-invalid > .p-radiobutton-box {
   border-color: #e57373;
 }
+.p-radiobutton:focus {
+  outline: 0 none;
+}
 
 .p-input-filled .p-radiobutton .p-radiobutton-box {
   background-color: #4b4b4b;
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index 24f49203d..f2e58f5c1 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -1087,6 +1087,9 @@
 .p-radiobutton.p-error > .p-radiobutton-box, .p-radiobutton.p-invalid > .p-radiobutton-box {
   border-color: #e57373;
 }
+.p-radiobutton:focus {
+  outline: 0 none;
+}
 
 .p-input-filled .p-radiobutton .p-radiobutton-box {
   background-color: #4b4b4b;
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index b070c5121..75d99dcb7 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -1087,6 +1087,9 @@
 .p-radiobutton.p-error > .p-radiobutton-box, .p-radiobutton.p-invalid > .p-radiobutton-box {
   border-color: #e57373;
 }
+.p-radiobutton:focus {
+  outline: 0 none;
+}
 
 .p-input-filled .p-radiobutton .p-radiobutton-box {
   background-color: #4b4b4b;
diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css
index 40c53025d..63894f7ac 100644
--- a/public/themes/md-dark-deeppurple/theme.css
+++ b/public/themes/md-dark-deeppurple/theme.css
@@ -1107,6 +1107,9 @@
 .p-radiobutton.p-error > .p-radiobutton-box, .p-radiobutton.p-invalid > .p-radiobutton-box {
   border-color: #f44435;
 }
+.p-radiobutton:focus {
+  outline: 0 none;
+}
 
 .p-input-filled .p-radiobutton .p-radiobutton-box {
   background-color: rgba(255, 255, 255, 0.06);
diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css
index 788a72f64..58cbdf994 100644
--- a/public/themes/md-dark-indigo/theme.css
+++ b/public/themes/md-dark-indigo/theme.css
@@ -1107,6 +1107,9 @@
 .p-radiobutton.p-error > .p-radiobutton-box, .p-radiobutton.p-invalid > .p-radiobutton-box {
   border-color: #f44435;
 }
+.p-radiobutton:focus {
+  outline: 0 none;
+}
 
 .p-input-filled .p-radiobutton .p-radiobutton-box {
   background-color: rgba(255, 255, 255, 0.06);
diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css
index aace49812..e245a0cd9 100644
--- a/public/themes/md-light-deeppurple/theme.css
+++ b/public/themes/md-light-deeppurple/theme.css
@@ -1107,6 +1107,9 @@
 .p-radiobutton.p-error > .p-radiobutton-box, .p-radiobutton.p-invalid > .p-radiobutton-box {
   border-color: #B00020;
 }
+.p-radiobutton:focus {
+  outline: 0 none;
+}
 
 .p-input-filled .p-radiobutton .p-radiobutton-box {
   background-color: #f5f5f5;
diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css
index 1baadb8f7..bfbf2898d 100644
--- a/public/themes/md-light-indigo/theme.css
+++ b/public/themes/md-light-indigo/theme.css
@@ -1107,6 +1107,9 @@
 .p-radiobutton.p-error > .p-radiobutton-box, .p-radiobutton.p-invalid > .p-radiobutton-box {
   border-color: #B00020;
 }
+.p-radiobutton:focus {
+  outline: 0 none;
+}
 
 .p-input-filled .p-radiobutton .p-radiobutton-box {
   background-color: #f5f5f5;
diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css
index b5524e051..dae9562df 100644
--- a/public/themes/mdc-dark-deeppurple/theme.css
+++ b/public/themes/mdc-dark-deeppurple/theme.css
@@ -1107,6 +1107,9 @@
 .p-radiobutton.p-error > .p-radiobutton-box, .p-radiobutton.p-invalid > .p-radiobutton-box {
   border-color: #f44435;
 }
+.p-radiobutton:focus {
+  outline: 0 none;
+}
 
 .p-input-filled .p-radiobutton .p-radiobutton-box {
   background-color: rgba(255, 255, 255, 0.06);
diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css
index dba7f1f13..90538c880 100644
--- a/public/themes/mdc-dark-indigo/theme.css
+++ b/public/themes/mdc-dark-indigo/theme.css
@@ -1107,6 +1107,9 @@
 .p-radiobutton.p-error > .p-radiobutton-box, .p-radiobutton.p-invalid > .p-radiobutton-box {
   border-color: #f44435;
 }
+.p-radiobutton:focus {
+  outline: 0 none;
+}
 
 .p-input-filled .p-radiobutton .p-radiobutton-box {
   background-color: rgba(255, 255, 255, 0.06);
diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css
index 903fcbd0f..848f5bc54 100644
--- a/public/themes/mdc-light-deeppurple/theme.css
+++ b/public/themes/mdc-light-deeppurple/theme.css
@@ -1107,6 +1107,9 @@
 .p-radiobutton.p-error > .p-radiobutton-box, .p-radiobutton.p-invalid > .p-radiobutton-box {
   border-color: #B00020;
 }
+.p-radiobutton:focus {
+  outline: 0 none;
+}
 
 .p-input-filled .p-radiobutton .p-radiobutton-box {
   background-color: #f5f5f5;
diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css
index 82bfbc793..fff05350a 100644
--- a/public/themes/mdc-light-indigo/theme.css
+++ b/public/themes/mdc-light-indigo/theme.css
@@ -1107,6 +1107,9 @@
 .p-radiobutton.p-error > .p-radiobutton-box, .p-radiobutton.p-invalid > .p-radiobutton-box {
   border-color: #B00020;
 }
+.p-radiobutton:focus {
+  outline: 0 none;
+}
 
 .p-input-filled .p-radiobutton .p-radiobutton-box {
   background-color: #f5f5f5;
diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css
index fe4473f22..e4cf3aef9 100644
--- a/public/themes/nova-accent/theme.css
+++ b/public/themes/nova-accent/theme.css
@@ -1083,6 +1083,9 @@
 .p-radiobutton.p-error > .p-radiobutton-box, .p-radiobutton.p-invalid > .p-radiobutton-box {
   border-color: #a80000;
 }
+.p-radiobutton:focus {
+  outline: 0 none;
+}
 
 .p-input-filled .p-radiobutton .p-radiobutton-box {
   background-color: #f4f4f4;
diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css
index dfd726081..0f56e39f8 100644
--- a/public/themes/nova-alt/theme.css
+++ b/public/themes/nova-alt/theme.css
@@ -1087,6 +1087,9 @@
 .p-radiobutton.p-error > .p-radiobutton-box, .p-radiobutton.p-invalid > .p-radiobutton-box {
   border-color: #a80000;
 }
+.p-radiobutton:focus {
+  outline: 0 none;
+}
 
 .p-input-filled .p-radiobutton .p-radiobutton-box {
   background-color: #f4f4f4;
diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css
index 59629f977..25c547904 100644
--- a/public/themes/nova-vue/theme.css
+++ b/public/themes/nova-vue/theme.css
@@ -1087,6 +1087,9 @@
 .p-radiobutton.p-error > .p-radiobutton-box, .p-radiobutton.p-invalid > .p-radiobutton-box {
   border-color: #a80000;
 }
+.p-radiobutton:focus {
+  outline: 0 none;
+}
 
 .p-input-filled .p-radiobutton .p-radiobutton-box {
   background-color: #f4f4f4;
diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css
index ce82f8a39..141490452 100644
--- a/public/themes/nova/theme.css
+++ b/public/themes/nova/theme.css
@@ -1087,6 +1087,9 @@
 .p-radiobutton.p-error > .p-radiobutton-box, .p-radiobutton.p-invalid > .p-radiobutton-box {
   border-color: #a80000;
 }
+.p-radiobutton:focus {
+  outline: 0 none;
+}
 
 .p-input-filled .p-radiobutton .p-radiobutton-box {
   background-color: #f4f4f4;
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index 1ab2749b1..85b53b79d 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -1083,6 +1083,9 @@
 .p-radiobutton.p-error > .p-radiobutton-box, .p-radiobutton.p-invalid > .p-radiobutton-box {
   border-color: #e7a3a3;
 }
+.p-radiobutton:focus {
+  outline: 0 none;
+}
 
 .p-input-filled .p-radiobutton .p-radiobutton-box {
   background-color: #f4f4f4;
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index 9252f12e4..be17c5c6e 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -1083,6 +1083,9 @@
 .p-radiobutton.p-error > .p-radiobutton-box, .p-radiobutton.p-invalid > .p-radiobutton-box {
   border-color: #f44336;
 }
+.p-radiobutton:focus {
+  outline: 0 none;
+}
 
 .p-input-filled .p-radiobutton .p-radiobutton-box {
   background-color: #f8f9fa;
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index 8ea803bba..b2d22ea8d 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -1083,6 +1083,9 @@
 .p-radiobutton.p-error > .p-radiobutton-box, .p-radiobutton.p-invalid > .p-radiobutton-box {
   border-color: #f44336;
 }
+.p-radiobutton:focus {
+  outline: 0 none;
+}
 
 .p-input-filled .p-radiobutton .p-radiobutton-box {
   background-color: #f8f9fa;
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index a3d01d201..4ed92f807 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -1083,6 +1083,9 @@
 .p-radiobutton.p-error > .p-radiobutton-box, .p-radiobutton.p-invalid > .p-radiobutton-box {
   border-color: #f44336;
 }
+.p-radiobutton:focus {
+  outline: 0 none;
+}
 
 .p-input-filled .p-radiobutton .p-radiobutton-box {
   background-color: #f8f9fa;
diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css
index 2db01076d..0989bf1c2 100644
--- a/public/themes/saga-purple/theme.css
+++ b/public/themes/saga-purple/theme.css
@@ -1083,6 +1083,9 @@
 .p-radiobutton.p-error > .p-radiobutton-box, .p-radiobutton.p-invalid > .p-radiobutton-box {
   border-color: #f44336;
 }
+.p-radiobutton:focus {
+  outline: 0 none;
+}
 
 .p-input-filled .p-radiobutton .p-radiobutton-box {
   background-color: #f8f9fa;
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index 4ed92eaa4..cbf8b9504 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -1083,6 +1083,9 @@
 .p-radiobutton.p-error > .p-radiobutton-box, .p-radiobutton.p-invalid > .p-radiobutton-box {
   border-color: #ef9a9a;
 }
+.p-radiobutton:focus {
+  outline: 0 none;
+}
 
 .p-input-filled .p-radiobutton .p-radiobutton-box {
   background-color: #304562;
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index 73090886f..dc35979b4 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -1083,6 +1083,9 @@
 .p-radiobutton.p-error > .p-radiobutton-box, .p-radiobutton.p-invalid > .p-radiobutton-box {
   border-color: #ef9a9a;
 }
+.p-radiobutton:focus {
+  outline: 0 none;
+}
 
 .p-input-filled .p-radiobutton .p-radiobutton-box {
   background-color: #304562;
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index cfe0fadba..c09c2a506 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -1083,6 +1083,9 @@
 .p-radiobutton.p-error > .p-radiobutton-box, .p-radiobutton.p-invalid > .p-radiobutton-box {
   border-color: #ef9a9a;
 }
+.p-radiobutton:focus {
+  outline: 0 none;
+}
 
 .p-input-filled .p-radiobutton .p-radiobutton-box {
   background-color: #304562;
diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css
index 1f3d3957a..662fee792 100644
--- a/public/themes/vela-purple/theme.css
+++ b/public/themes/vela-purple/theme.css
@@ -1083,6 +1083,9 @@
 .p-radiobutton.p-error > .p-radiobutton-box, .p-radiobutton.p-invalid > .p-radiobutton-box {
   border-color: #ef9a9a;
 }
+.p-radiobutton:focus {
+  outline: 0 none;
+}
 
 .p-input-filled .p-radiobutton .p-radiobutton-box {
   background-color: #304562;
diff --git a/src/components/datatable/RowRadioButton.vue b/src/components/datatable/RowRadioButton.vue
index c9748e2d1..1df6f0a9c 100755
--- a/src/components/datatable/RowRadioButton.vue
+++ b/src/components/datatable/RowRadioButton.vue
@@ -1,9 +1,6 @@
 <template>
-    <div class="p-radiobutton p-component" @click="onClick">
-        <div class="p-hidden-accessible">
-           <input ref="input" type="radio" :checked="checked" @focus="onFocus($event)" @blur="onBlur($event)" :disabled="$attrs.disabled">
-        </div>
-        <div ref="box" :class="['p-radiobutton-box p-component', {'p-highlight': checked, 'p-disabled': disabled, 'p-focus': focused}]" role="radio" :aria-checked="checked">
+    <div class="p-radiobutton p-component" @click="onClick" tabindex="0" @focus="onFocus($event)" @blur="onBlur($event)">
+        <div ref="box" :class="['p-radiobutton-box p-component', {'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused}]" role="radio" :aria-checked="checked">
             <div class="p-radiobutton-icon"></div>
         </div>
     </div>
@@ -15,7 +12,6 @@ export default {
     emits: ['change'],
     props: {
 		value: null,
-        disabled: null,
         checked: null
     },
     data() {
@@ -32,8 +28,6 @@ export default {
                         data: this.value
                     });
                 }
-
-                this.$refs.input.focus();
             }
         },
         onFocus() {