Survey-library: Checkboxes keeping checked class after unchecking

[benirose]

Are you requesting a feature, reporting a bug or ask a question?

Reporting a bug

What is the current behavior?

When using checkboxes field, checking them will add a checked class to the div wrapping the label. However, when you uncheck the last checkbox (leaving nothing checked), the last box to be unchecked will still have a checked class applied to the div.

What is the expected behavior?

The checked class should be removed from any checkbox that is not checked.

How would you reproduce the current behavior (if this is a bug)?

Create a survey with a checkboxes field, check a checkbox, then uncheck. checked class will remain.

Provide the test code and the tested page URL (if applicable)

Tested page URL: https://codepen.io/benirose/pen/aGqVor
(You'll have to inspect elements to see the checked class still applied)

Specify your

• browser: Chrome
• browser version: 66
• surveyjs platform (angular or react or jquery or knockout or vue): Vue
• surveyjs version: 1.0.20

[benirose]

I dug into the code a bit and was able to identify the line that assigns the checked class to the containing div.

In /src/vue/checkbox.vue on line 42:
var isChecked = this.question.value && this.question.value.indexOf(item.value) !== -1;

When I run this condition manually in the console, I get the correct values, true when checked and false when not checked. However, the dom is not updating with the change, so my hypothesis is that whatever reactivity is expected from Vue to update is not getting triggered when the questions array returns to empty.

[benirose]

Note: This is also causing the "other" textbox to remain displayed even after unchecking the "other" option.

[andrewtelnov]

@benirose We will take a look at it.
Thank you,
Andrew

[dmitrykurmanov]

Hello! This is not actually the bug. Survey data is hash table and Vue can't correctly watch it out of the box. We need to create separate observable variable for it. Please check: https://codepen.io/dvadvk/pen/demRqX

[benirose]

That was my assumption as well, as I noticed the code in the method evaluates correctly when run manually. It doesn't look like your codepen fixes the issue.

[dmitrykurmanov]

@benirose yes, you are right, we will take a look.

[dmitrykurmanov]

We've found two separate issues here. The problem with result data was fixed in the codepen https://codepen.io/dvadvk/pen/demRqX. The second problem with the "other" textbox. We 've created a separate issue for it: https://github.com/surveyjs/surveyjs/issues/1097

Do you see any ohter problems with this codepen?

[benirose]

I'd love to help, but I'm not sure exactly what the solution might look like in terms of making Vue reactive to the change. It's clearly reactive to the change when this.question.value gets an element added or removed from the array, but when the array returns to an empty state, the reactivity isn't happening.

[dmitrykurmanov]

@benirose please look at #1097 we've fixed it here (https://github.com/surveyjs/surveyjs/commit/a0ee7d971615a790954f6f167c6a00362d7bf8f7). Vue.delete and Vue.set methods does the trick. And the doc

[benirose]

Sorry for the delay, but I wanted to thank you for fixing this!