[BD-46] fix: fixed duplicate calls in FormRadioSet and FormCheckboxSet

[PKulkoRaccoonGang]

Description

• fixed the problem of duplicate calls during onChange for the Form.RadioSet and Form.CheckboxSet components.

Issue: #2683

Deploy Preview

Playground demo

Merge Checklist

• If your update includes visual changes, have they been reviewed by a designer? Send them a link to the Netlify deploy preview, if applicable.
• Does your change adhere to the documented style conventions?
• Do any prop types have missing descriptions in the Props API tables in the documentation site (check deploy preview)?
• Were your changes tested using all available themes (see theme switcher in the header of the deploy preview, under the "Settings" icon)?
• Were your changes tested in the example app?
• Is there adequate test coverage for your changes?
• Consider whether this change needs to reviewed/QA'ed for accessibility (a11y). If so, please add wittjeff and adamstankiewicz as reviewers on this PR.

Post-merge Checklist

• Verify your changes were released to NPM at the expected version.
• If you'd like, share your contribution in #show-and-tell.
• 🎉 🙌 Celebrate! Thanks for your contribution.

[openedx-webhooks]

Thanks for the pull request, @PKulkoRaccoonGang!

When this pull request is ready, tag your edX technical lead.

[netlify]

✅ Deploy Preview for paragon-openedx ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	7bfa1e5
🔍 Latest deploy log	https://app.netlify.com/sites/paragon-openedx/deploys/6528052eb8031c0008b925d2
😎 Deploy Preview	https://deploy-preview-2705--paragon-openedx.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[codecov]

Codecov Report

All modified lines are covered by tests ✅

Comparison is base (c00d2c9) 92.74% compared to head (7bfa1e5) 92.74%.
Report is 1 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #2705      +/-   ##
==========================================
- Coverage   92.74%   92.74%   -0.01%     
==========================================
  Files         235      235              
  Lines        4234     4230       -4     
  Branches     1027     1027              
==========================================
- Hits         3927     3923       -4     
  Misses        303      303              
  Partials        4        4              

Files	Coverage Δ
src/Form/FormCheckbox.jsx	100.00% <100.00%> (ø)
src/Form/FormRadio.jsx	100.00% <100.00%> (ø)

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[viktorrusakov]

@PKulkoRaccoonGang Please add test cases checking that onClick handler is only invoked once, so we don't run into this bug in the future.

[viktorrusakov]

@PKulkoRaccoonGang Your solution works, but it does not fix the underlying problem -- getRadioControlProps getting called in both FormRadio (parent component) and RadioControl (child component) (same thing in FormCheckbox), this will eventually lead to other bugs and also it just seems redundant, only one component needs to use this function.

I think the simplest solution is to remove getRadioControlProps usage from FormRadio, it seems useless there and it does not do anything, if you look closely you'll see that we only use id and disabled props from radioInputProps, but they are already present in original props and getRadioControlProps does not do anything with them, it just copies them and that's all. I think you can simply remove context usage from FormRadio because it just does not use it in any way, only RadioControl needs to use context and getRadioControlProps function. Rewriting FormRadio to this works for me locally, i.e. it does not break any tests and I don't see any behaviour changes on the docs site. Can you validate as well and try it for the Checkbox component too?

const FormRadio = React.forwardRef(({
  children,
  className,
  controlClassName,
  labelClassName,
  description,
  isInvalid,
  isValid,
  ...props
}, ref) => {
  return (
    <FormGroupContextProvider
      controlId={props.id}
      isInvalid={isInvalid}
      isValid={isValid}
    >
      <div
        className={classNames('pgn__form-radio', className, {
          'pgn__form-control-valid': isValid,
          'pgn__form-control-invalid': isInvalid,
          'pgn__form-control-disabled': props.disabled,
        })}
      >
        <RadioControl ref={ref} className={controlClassName} {...props} />
        <div>
          <FormLabel className={labelClassName}>
            {children}
          </FormLabel>
          {description && (
            <FormControlFeedback hasIcon={false}>
              {description}
            </FormControlFeedback>
          )}
        </div>
      </div>
    </FormGroupContextProvider>
  );
});

[openedx-webhooks]

@PKulkoRaccoonGang 🎉 Your pull request was merged! Please take a moment to answer a two question survey so we can improve your experience in the future.

[edx-semantic-release]

🎉 This PR is included in version 21.5.3 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[edx-semantic-release]

🎉 This PR is included in version 22.0.0-alpha.11 🎉

The release is available on:

• npm package (@alpha dist-tag)
• GitHub release

Your semantic-release bot 📦🚀