Merge branch 'marina.mosti-3017-checkbox-checked-vue3' into 'main'

fix: vue 3 checked state on GlFormCheckbox

See merge request !4863



Merged-by: Jose Ivan Vargas <jvargas@gitlab.com>
Approved-by: Mark Florian <mflorian@gitlab.com>
Approved-by: Jose Ivan Vargas <jvargas@gitlab.com>
Approved-by: Dan MH <dmizzi-harris@gitlab.com>
Reviewed-by: Mark Florian <mflorian@gitlab.com>
Co-authored-by: Marina Mosti <mmosti@gitlab.com>

src/components/base/form/form_checkbox/form_checkbox.spec.js

+import { mount } from '@vue/test-utils';
+import GlFormCheckbox from './form_checkbox.vue';
+
+describe('GlFormCheckbox', () => {
+  let wrapper;
+
+  const createComponent = (options) => {
+    wrapper = mount(GlFormCheckbox, options);
+  };
+
+  it('can start checked', async () => {
+    createComponent({
+      propsData: {
+        checked: 'checked_value',
+        value: 'checked_value',
+        name: 'foo',
+      },
+    });
+
+    expect(wrapper.find('input[name="foo"]').element.checked).toBe(true);
+  });
+});

src/components/base/form/form_checkbox/form_checkbox.stories.js

@@ -46,6 +46,18 @@ const Template = (args, { argTypes }) => ({
 
 export const Default = Template.bind({});
 
+const Single = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components,
+  template: `
+    <div>
+      <gl-form-checkbox value="checked-option" checked="checked-option">Checked option</gl-form-checkbox>
+    </div>
+  `,
+});
+
+export const SingleCheckbox = Single.bind({});
+
 export default {
   title: 'base/form/form checkbox',
   component: GlFormCheckbox,

src/vendor/bootstrap-vue/src/mixins/form-radio-check.js

@@ -192,7 +192,6 @@ export const formRadioCheckMixin = extend({
 
     const $input = h('input', {
       class: ['custom-control-input', this.stateClass],
-      directives: [{ name: 'model', value: this.computedLocalChecked }],
       attrs: this.computedAttrs,
       domProps: {
         value: this.value,