fix radio also

Author: xvaara

src/App.vue

@@ -692,6 +692,7 @@
           <b-form-radio value="second">Or toggle this other custom radio</b-form-radio>
           <b-form-radio value="third" disabled>This one is Disabled</b-form-radio>
           <b-form-radio :value="{fourth: 4}">This is the 4th radio</b-form-radio>
+          <b-form-radio :value="{fifth: 5}">This is the 5th radio</b-form-radio>
         </b-form-radio-group>
 
         <div class="mt-3">
@@ -715,6 +716,10 @@
         </div>
       </div>
       <h4 class="m-2">Button styles radios</h4>
+      <div class="mt-3">
+        Selected:
+        <strong>{{ radios.ex3.selected }}</strong>
+      </div>
       <div class="m-4">
         <b-form-radio-group
           id="btn-radios-1"
@@ -1955,21 +1960,24 @@ export default defineComponent({
         ],
       },
       ex2: {
-        selected: {d: 1},
+        selected: {e: 1},
         options: [
           {item: 'A', name: 'Option A'},
           {item: 'B', name: 'Option B'},
           {item: 'D', name: 'Option C', notEnabled: true},
           {item: {d: 1}, name: 'Option D'},
+          {item: {e: 1}, name: 'Option E'},
         ],
       },
       ex3: {
-        selected: 'radio1',
+        selected: {e: 1},
         options: [
           {text: 'Radio 1', value: 'radio1'},
           {text: 'Radio 3', value: 'radio2'},
           {text: 'Radio 3 (disabled)', value: 'radio3', disabled: true},
           {text: 'Radio 4', value: 'radio4'},
+          {value: {d: 1}, text: 'Option D'},
+          {value: {e: 1}, text: 'Option E'},
         ],
       },
     })

src/components/BFormRadio/BFormRadio.vue

@@ -4,6 +4,7 @@
       :id="computedId"
       v-bind="$attrs"
       ref="input"
+      v-model="localValue"
       :class="inputClasses"
       type="radio"
       :disabled="disabled"
@@ -13,11 +14,7 @@
       :aria-label="ariaLabel"
       :aria-labelledby="ariaLabelledBy"
       :value="value"
-      :checked="isChecked"
       :aria-required="name && required ? 'true' : null"
-      @click.stop="handleClick($event.target.checked)"
-      @focus="focus"
-      @blur="blur"
     />
     <label
       v-if="$slots.default || !plain"
@@ -61,7 +58,7 @@ export default defineComponent({
     const input: Ref<HTMLElement> = ref(null as unknown as HTMLElement)
     const isFocused = ref(false)
 
-    const localChecked: any = computed({
+    const localValue: any = computed({
       get: () => props.modelValue,
       set: (newValue: any) => {
         emit('input', newValue)
@@ -70,18 +67,6 @@ export default defineComponent({
       },
     })
 
-    const focus = () => {
-      isFocused.value = true
-      if (!props.disabled) input.value.focus()
-    }
-
-    const blur = () => {
-      isFocused.value = false
-      if (!props.disabled) {
-        input.value.blur()
-      }
-    }
-
     const isChecked = computed(() => {
       if (Array.isArray(props.modelValue)) {
         return (props.modelValue || []).find((e) => e === props.value)
@@ -93,23 +78,6 @@ export default defineComponent({
     const inputClasses = getInputClasses(props)
     const labelClasses = getLabelClasses(props)
 
-    const handleClick = async (checked: boolean) => {
-      if (Array.isArray(props.modelValue)) {
-        if ((props.modelValue || [])[0] !== props.value) {
-          localChecked.value = [props.value]
-        }
-      } else if (checked && props.modelValue !== props.value) {
-        localChecked.value = props.value
-      }
-    }
-
-    watch(
-      () => props.modelValue,
-      (newValue) => {
-        emit('input', newValue)
-      }
-    )
-
     // TODO: make jest tests compatible with the v-focus directive
     if (props.autofocus) {
       onMounted(() => {
@@ -118,17 +86,14 @@ export default defineComponent({
     }
 
     return {
-      localChecked,
+      localValue,
       computedId,
       classes,
       inputClasses,
       labelClasses,
       isChecked,
       isFocused,
       input,
-      handleClick,
-      focus,
-      blur,
     }
   },
 })

src/components/BFormRadio/BFormRadioGroup.vue

@@ -8,7 +8,7 @@
     tabindex="-1"
   >
     <template v-for="(item, key) in checkboxList" :key="key">
-      <b-form-radio v-model="item.model" v-bind="item.props" @change="childUpdated">
+      <b-form-radio v-model="localValue" v-bind="item.props">
         <!-- eslint-disable vue/no-v-html -->
         <span v-if="item.html" v-html="item.html" />
         <!--eslint-enable-->
@@ -60,7 +60,7 @@ export default defineComponent({
     const computedId = useId(props.id, 'radio')
     const computedName = useId(props.name, 'checkbox')
 
-    const localChecked = computed({
+    const localValue = computed({
       get: () => props.modelValue,
       set: (newValue: any) => {
         emit('input', newValue)
@@ -76,18 +76,9 @@ export default defineComponent({
         .map((e, idx) => bindGroupProps(e, idx, props, computedName, computedId))
         .map((e) => ({
           ...e,
-          model:
-            JSON.stringify(props.modelValue) === JSON.stringify(e.props?.value)
-              ? e.props?.value
-              : null,
         }))
     )
 
-    const childUpdated = (newValue: any) => {
-      emit('change', newValue)
-      emit('update:modelValue', newValue)
-    }
-
     const attrs = getGroupAttr(props)
     const classes = getGroupClasses(props)
 
@@ -97,9 +88,8 @@ export default defineComponent({
       attrs,
       classes,
       checkboxList,
-      childUpdated,
       computedId,
-      localChecked,
+      localValue,
     }
   },
 })