[Components - ToggleGroupControl]: Fix extra update on incoming change

[ntsekouras]

Fixes: #37172

There was a bug in ToggleGroupControl component where it would call the passed onChange function during rendering an extra time where the value was the result of an incoming change (redo/undo). That would cause an extra level in history which was the same with the previous one, due to internal logic of handling history steps.

Testing instructions (from the issue 😄 )

1. Navigate to the post editor
2. Add text to a paragraph block
3. In the paragraph block's block settings menu, update line height
4. Update font size
5. Undo until the text and typography updates are gone
6. Redo until you return to the current revision
7. Verify that font-size isn't restored

** noting that to reproduce the bug we have to also have at least one more typography setting which is handled by style object property. This is needed because it has to do with internals detection of marking history steps.

Before

Screen.Recording.2021-12-08.at.4.27.48.PM.mov

After

after.mov

[mcsf]

Looks good, although the manual two-way binding with the twin useUpdateEffect hooks is something I found surprising.

[ciampo]

The changes test well as per instructions, and do fix the issue reported in #37172

I just wonder if this change in behavior could be unexpected for a consumer of this component, in case they expected the onChange callback to fire every time there's a change in value, regardless of whether the change is "external" or "internal"

In any case, could we also add a couple of doc changes:

• potentially update the onChange prop docs in the README and in types.ts specifying the new behaviour
• add a CHANGELOG entry to the @wordpress/components package? It can go under the Experimental section, since the component is marked as such

[youknowriad]

I just wonder if this change in behavior could be unexpected for a consumer of this component, in case they expected the onChange callback to fire every time there's a change in value, regardless of whether the change is "external" or "internal"

I think we should base the behavior of all the components on the behavior of the regular elements (input...) and onChange is not called there if it's an external change.

[ciampo]

I think we should base the behavior of all the components on the behavior of the regular elements (input...) and onChange is not called there if it's an external change.

That sounds reasonable, let's go ahead and merge these changes once the CHANGELOG is updated