Why can't the CheckBoxGroup component set initial checked options?

AppStudio
1

I ran the following code:

Instance.CheckboxGroup_1.optionItems=‘a|a;b|b;c|c’;
await Instance.CheckboxGroup_1.render();
Instance.CheckboxGroup_1.checkedIndexes=[0,1];

After the page renders, items a and b are not checked on the UI. How can I resolve this issue?

企业微信截图_1780411154610
企业微信截图_17804111546101066×395 2.6 KB

企业微信截图_17804112468196
企业微信截图_178041124681961339×354 30.5 KB

I Test the CheckGroup_A:

const checkboxGroup = new TComponents.CheckboxGroup_A(this.container.querySelector(‘.layout-infobox-content’), {

position: ‘absolute’,

zIndex: 1000,

optionItems: `text1|value1;\ntext2|value2;\ntext3|value3`

});

await checkboxGroup.render();

checkboxGroup.selectedIndexes = [0, 1];
Show OK

but I add on the end

checkboxGroup.onChange= async function() {

console.log(‘Checkbox group changed.’, this.color);

};

It stops working immediately upon display.

const checkboxGroup = new TComponents.CheckboxGroup_A(null, {

position: ‘absolute’,

zIndex: 1000,

optionItems: `text1|value1;\ntext2|value2;\ntext3|value3`

});

await checkboxGroup.render();

// Set the selected indexes

this.appendChild(checkboxGroup); // this is a layoutInfoBox

checkboxGroup.selectedIndexes = [0, 1];

Not Work

If the initial value has been configured in the property panel on the UI，

Instance.checkboxGroup_1.selectedIndexes = [0, 1]; Show OK

However, checkedIndexes does not work at all only after dynamically setting the options.

This leaves me at a loss. I normally avoid commenting on component quality, but this implementation is really poorly done.

2

Things we might need to double-check:

  1. Spin up a separate webapp just to test the API and see if it takes effect immediately. It worked fine on my end during my local test.

  2. If the component’s refresh stage is unstable and you’re not sure if it triggers properly, you can try adding a JavaScript delay function (setTimeout) to see if that helps.

3

new app name webapp2, set a LayoutInfoBox1, place a CheckboxGroup in it, and function in LayoutInfoBox_1 OnMount event :

Instance.CheckboxGroup_1.optionItems=‘a|a;b|b;c|c’;

Instance.CheckboxGroup_1.checkedIndexes=[0,1];

not Checked display

企业微信截图_17804581413626
企业微信截图_178045814136261513×435 39.1 KB

企业微信截图_1780458200318
企业微信截图_17804582003181123×489 16.6 KB

4

Could you tell me under what circumstances it works properly and how you performed your test?

5

I found in the OnMount event, at the end add Instance.CheckBoxGroup_1.onChange=function(){ console.log(this.color};
The initial values never display correctly.

6

I think you are encountering an issue with timing render … Because the render mechanism of components is an asynchronous rendering mechanism implemented with a queue (this can be seen in the source code of the web app deployed by AppStudio v1.3.0) .

In some cases, complex components may be rendered twice in succession, which is not the expected behavior. We are currently investigating such issues.Just like your operation, rendering the CheckboxGroup twice in succession(One assignment Instance.xxx = xxx means one render.)

✨✨✨✨✨ Use setProps to update multiple properties at once, which is also officially recommended by AppStudio. Namespace: How to update component properties But it is currently not compatible with the checkboxgroup component… because its checkedIndexes attribute is not a attribute in props…

Thank you for your feedback. We have identified this as a bug in version v1.3.0…

Workaround: Use JavaScript’s delay function. This is straightforward, but once the project becomes more complex, it tends to get out of control.


Instance.CheckboxGroup_1.optionItems = 'a|a;b|b;c|c';

setTimeout(() => {
    Instance.CheckboxGroup_1.checkedIndexes = [0, 1];
}, 500);
7

Thanks， the CheckBoxGroup work OK