Interactivity API how to use data-wp-bind--checked in a loop?

[webconstructor]

Is it possible to bind checked on a group of radio buttons generated in a loop and have the checked state be determined by the state?

Strangely enough in my current setup the last value is checked although 2 is in the state.
If I click on a value it is correctly set in the state and input field but not the right checkbox shows checked. You need to click twice to have it look checked...
Except when choosing 2 which is similar to the state value.

I am puzzled.
The behavior changes depending on using strings or integers??? '1' versus 1
Is this a timing or rerender issue?
Is bind even supported?
IMHO it should be.
How to get this working?

view.js:

import { store, getContext } from '@wordpress/interactivity';

const { state } = store( 'example', {
	state: {
		answers: [ 1, 2, 3, 4 ],
		chosen: 2,
	},
	actions: {
		handle: () => {
			const context = getContext();
			console.log( context.answer );
			state.chosen = context.answer;
			console.log( state );
		},
	},
} );

render.php:

<div <?php echo get_block_wrapper_attributes(); ?> data-wp-interactive="example"
	<?php echo wp_interactivity_data_wp_context( array() ); ?>>
	<div>
		<template data-wp-each--answer="state.answers">
			<input type="radio" data-wp-bind--checked="state.chosen" name="choice" data-wp-bind--value="context.answer"
				data-wp-on--click="actions.handle">
			<label for="" data-wp-text="context.answer">
			</label>

		</template>
	</div>
	<input data-wp-bind--value="state.chosen" type="text">
</div>

[sirreal]

This directive is binding the value in state to the attribute checked: data-wp-bind--checked="state.chosen"

The result is that all of the inputs have the attribute checked="2".

You'll want to use derived state to bind the checked value to a boolean like this:

const { state } = store( "example", {
  state: {
    get isChecked() {
      return getContext().answer === state.chosen;
    },
  },
} );

And bind the checked value accordingly: data-wp-bind--checked="state.isChecked"

---

A few other notes, it's generally preferable to set state on the server side with wp_interactivity_state. This will allow the HTML to be generated correctly on the server instead of initially rendering a skeleton and then rendering on the client.

However in this case it may be preferable to use only context. State is global (all interactive regions on the page share the same state) whereas context is local to the specific region. If this is a block and its rendered multiple times, changing the radio in any of the blocks would update the selected item in all of the blocks.

[webconstructor]

Briljant
I am sure this will help many others!
Thx.