fix(design): correct checkbox checked state logic for standalone usage (

#1627)
dream-num · Mar 18, 2024 · 5eea109 · 5eea109
1 parent b03c707
commit 5eea109
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 5 deletions.
diff --git a/packages/design/src/components/checkbox-group/CheckboxGroup.tsx b/packages/design/src/components/checkbox-group/CheckboxGroup.tsx
@@ -74,7 +74,6 @@ export function CheckboxGroup(props: ICheckboxGroupProps) {
                         key: index,
                         children: child.props.children,
                         value: child.props.value,
-                        checked: value.includes(child.props.value!),
                         disabled: disabled ?? child.props.disabled,
                         onChange: handleChange,
                     });

diff --git a/packages/design/src/components/checkbox/Checkbox.tsx b/packages/design/src/components/checkbox/Checkbox.tsx
@@ -40,6 +40,7 @@ export interface ICheckboxProps {
 
     /**
      * Used for setting the currently selected value
+     * Only used when the checkbox is in a group
      */
     value?: string | number | boolean;
 
@@ -71,8 +72,8 @@ export function Checkbox(props: ICheckboxProps) {
         if (typeof value !== 'undefined') {
             onChange?.(value);
         } else {
-            const checked = inputRef?.current?.checked!;
-            onChange?.(!checked);
+            const checked = inputRef?.current?.checked ?? false;
+            onChange?.(checked);
         }
     }
 

diff --git a/packages/find-replace/src/views/dialog/FindReplaceDialog.tsx b/packages/find-replace/src/views/dialog/FindReplaceDialog.tsx
@@ -214,7 +214,6 @@ export const ReplaceDialog = forwardRef(function ReplaceDIalogImpl(_props, ref)
                     <FormLayout>
                         <Checkbox
                             checked={caseSensitive}
-                            value={caseSensitive}
                             onChange={(checked) => {
                                 findReplaceService.changeCaseSensitive(checked as boolean);
                             }}
@@ -225,7 +224,6 @@ export const ReplaceDialog = forwardRef(function ReplaceDIalogImpl(_props, ref)
                     <FormLayout>
                         <Checkbox
                             checked={matchesTheWholeCell}
-                            value={matchesTheWholeCell}
                             onChange={(checked) => {
                                 findReplaceService.changeMatchesTheWholeCell(checked as boolean);
                             }}