CheckBoxGroup "defaultValues" prop change not reflecting with re-render

[amandal97]

Please consider the below implementation:

      <CheckboxGroup
        onChange={(e) => {
          props.updateAuthModes(e.values);
        }}
        defaultValue={props.route.auth}
      >
        {props.route.auth.map((authValue, index) => (
          <Checkbox
            key={index}
            size="medium"
            value={authValue}         
          >
            {authValue}
          </Checkbox>
        ))}
      </CheckboxGroup>

Here, when props.route changes, the consequent re-render is not picking up the new values provided to defaultValue prop. This might be because defaultValue is being set as a local state in useControllable hook.

Slack Thread

https://github.com/razorpay/blade/assets/45780866/73f1982a-9e1d-41cf-8a1a-4ae1a3257780

[anuraghazra]

@amandal97 thanks for the issue, will get this fixed. if you are blocked, for now you can add a key prop to the CheckboxGroup to force rerender it.

<CheckboxGroup key={props.route.auth} \/>

[anuraghazra]

when props.route changes, the consequent re-render is not picking up the new values provided to defaultValue prop.

@amandal97 actually this is an expected behaviour of uncontrolled components.

Changing defaultValue won't change the input's value on consequent re-render, because defaultValue is like an initial value once it's set it won't change between renders.

Here's a codesandbox demo for understanding

Solutions:

• I think either you can use a controlled state
• Or use the key prop, this is also viable solution if you don't want to manage the state of the checkbox yourself.

[anuraghazra]

Closing this as resolved, confirmed by @amandal97