fix(checkbox-input): display checkmark when checked is true (#699)

hashicorp · Aug 17, 2022 · 3714aff · 3714aff · vercel · Aug 17, 2022
1 parent ccc37c5
commit 3714aff
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 3 deletions.
diff --git a/.changeset/early-parrots-compete.md b/.changeset/early-parrots-compete.md
@@ -0,0 +1,5 @@
+---
+'@hashicorp/react-checkbox-input': patch
+---
+
+Display checkmark when checked is true
diff --git a/packages/checkbox-input/index.js b/packages/checkbox-input/index.js
@@ -35,7 +35,7 @@ function CheckboxInput({
     >
       <div className={s.wrapper}>
         <span className={s.checkbox}>
-          {field.value && <SvgrCheckmark />}
+          {field.value || field.checked ? <SvgrCheckmark /> : null}
           <input id={inputId} type="checkbox" {...field} />
         </span>
 

diff --git a/packages/checkbox-input/index.test.js b/packages/checkbox-input/index.test.js
@@ -37,12 +37,23 @@ describe('<CheckboxInput />', () => {
     expect(screen.getByText(emText).tagName).toBe('EM')
   })
 
-  it('should show the Check icon when the input is checked', () => {
+  it('should show the Check icon when the input is checked via value', () => {
     const props = defaultProps
     const { container } = render(
       <CheckboxInput
         {...defaultProps}
-        field={{ ...props.field, value: true, checked: true }}
+        field={{ ...props.field, value: true }}
+      />
+    )
+    expect(container.querySelector('svg')).toBeInTheDocument()
+  })
+
+  it('should show the Check icon when the input is checked via checked', () => {
+    const props = defaultProps
+    const { container } = render(
+      <CheckboxInput
+        {...defaultProps}
+        field={{ ...props.field, checked: true }}
       />
     )
     expect(container.querySelector('svg')).toBeInTheDocument()