Fixed #606 - DataTable multiple click RadioButton focus previous row

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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);

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);

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;

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;

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);

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);

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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() {