Merge pull request #904 from Trendyol/checkbox-validation-problem-903

fix(checkbox): fix validation state of checkbox
Trendyol · Aug 15, 2024 · e11bc05 · e11bc05
2 parents 1ddf7c0 + 5d33e44
commit e11bc05
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 15 deletions.
diff --git 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
@@ -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("");
       }