From 5d33e44932703b045b02374f7a548e0cb22054af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Enes=20Y=C4=B1ld=C4=B1r=C4=B1m?= <enes5519@gmail.com>
Date: Mon, 12 Aug 2024 17:08:19 +0300
Subject: [PATCH] fix(checkbox): fix validation state of checkbox

---
 .../checkbox-group/checkbox/bl-checkbox.stories.mdx    | 10 +++-------
 src/components/checkbox-group/checkbox/bl-checkbox.ts  |  9 +--------
 2 files changed, 4 insertions(+), 15 deletions(-)

diff --git a/src/components/checkbox-group/checkbox/bl-checkbox.stories.mdx b/src/components/checkbox-group/checkbox/bl-checkbox.stories.mdx
index 7a718f0c..27e38613 100644
--- a/src/components/checkbox-group/checkbox/bl-checkbox.stories.mdx
+++ b/src/components/checkbox-group/checkbox/bl-checkbox.stories.mdx
@@ -20,9 +20,6 @@ import { Meta, Canvas, ArgsTable, Story } from '@storybook/addon-docs';
     indeterminate: {
       control: 'boolean',
       default: false
-    },
-      value: {
-      control: 'text',
     },
     required: {
       control: 'boolean',
@@ -34,7 +31,6 @@ export const CheckboxTemplate = (args) => html`<bl-checkbox
   ?disabled=${args.disabled}
   ?checked=${args.checked}
   name='${ifDefined(args.name)}'
-  value='${ifDefined(args.value)}'
   ?indeterminate=${args.indeterminate}
   ?required=${args.required}
   invalid-text='${ifDefined(args.customInvalidText)}'>${args.label}</bl-checkbox>`;
@@ -135,10 +131,10 @@ Disabled state can be set via `disabled` attribute. A checkbox can be `disabled`
 Checkbox component has 'required' validation rule. Also custom invalid text can be passed by 'invalid-text' attribute
 
 <Canvas isColumn>
-  <Story name="Validation" args={{ label: 'Checkbox with default validation message',value:'1',required:true,name:"accept_term" }}>
+  <Story name="Validation" args={{ label: 'Checkbox with default validation message',required:true,name:"accept_term" }}>
     {CheckboxTemplate.bind({})}
   </Story>
-  <Story name="Validation with Custom Text" args={{ label: 'Checkbox with default custom validation message',value:'1',required:true,name:"accept_term",customInvalidText:'This field is mandatory' }}>
+  <Story name="Validation with Custom Text" args={{ label: 'Checkbox with default custom validation message',required:true,name:"accept_term",customInvalidText:'This field is mandatory' }}>
     {CheckboxTemplate.bind({})}
   </Story>
 </Canvas>
@@ -148,7 +144,7 @@ Checkbox component has 'required' validation rule. Also custom invalid text can
 Provide the name and the value of the checkbox element, so that its value can be set on the form element
 
 <Canvas>
-  <Story name="Form Usage" args={{ label: 'Terms and conditions',value:'1',required:true,name:"accept_term" }}>
+  <Story name="Form Usage" args={{ label: 'Terms and conditions',required:true,name:"accept_term" }}>
     {FormTemplate.bind({})}
   </Story>
 </Canvas>
diff --git a/src/components/checkbox-group/checkbox/bl-checkbox.ts b/src/components/checkbox-group/checkbox/bl-checkbox.ts
index 88748279..be401c3c 100644
--- a/src/components/checkbox-group/checkbox/bl-checkbox.ts
+++ b/src/components/checkbox-group/checkbox/bl-checkbox.ts
@@ -112,17 +112,10 @@ export default class BlCheckbox extends FormControlMixin(LitElement) {
     this.form?.removeEventListener("submit", e => this.handleSubmit(e));
   }
 
-  protected firstUpdated(changedProperties: Map<string, unknown>) {
-    if (changedProperties.has("checked") && this.checked) {
-      this.value = "on";
-      this.setValue(this.value);
-    }
-  }
-
   protected async updated(changedProperties: Map<string, unknown>): Promise<void> {
     if (changedProperties.has("checked") && this.required) {
       if (this.checked) {
-        this.setValue(this.value);
+        this.setValue("on");
       } else if (!this.checked) {
         this.setValue("");
       }