`CheckboxGroup` value does not handle dynamic `Checkbox` children or props

[Swiftwork]

Describe the bug CheckboxGroup does not correctly detect checked Checkbox children when data isn't present directly on load. This causes the checkboxes to look checked, but once pressed the onChange reports selected as [].

To Reproduce Reproduction

Expected behavior When Checkbox checked property is updated the selectedValues array should reflect this.

Desktop (please complete the following information):

• OS: All
• Browser: All
• Version: 35.1.0

Smartphone (please complete the following information):

• Device: All
• OS: All
• Browser: All
• Version: 35.1.0

Additional context Related lines of code: https://github.com/primer/react/blob/v35.1.0/src/CheckboxGroup.tsx#L40 and https://github.com/primer/react/blob/v35.1.0/src/hooks/useRenderForcingRef.ts I suspect the needed change would be to make the value of useRenderForcingRef.ts reactive to parent changes.

Inspiration:

import { useEffect, useRef, useState } from 'react';

/** Extended useState hook to update on prop change */
export function useReactiveState<S>(reactiveState: S | (() => S)) {
  const [state, setState] = useState<S>(reactiveState);
  const firstRender = useRef(true);
  useEffect(() => {
    if (!firstRender.current) setState(reactiveState);
    else firstRender.current = false;
  }, [reactiveState, firstRender]);
  return [state, setState, firstRender] as const;
}

[Swiftwork]

A temporary workaround for anyone else that runs into this issue is to conditionally render the entire CheckboxGroup until the data for the Checkbox children has loaded.

[lesliecdubs]

Hi there @Swiftwork! We've moved this into our backlog for now. We will want to review the need for this change at a systems level before baking it in.

[github-actions[bot]]

Hi! This issue has been marked as stale because it has been open with no activity for 180 days. You can comment on the issue or remove the stale label to keep it open. If you do nothing, this issue will be closed in 7 days.