[Knockout] Incorrect CSS for matrix rows with errors

[SamMousa]

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

Bug

What is the current behavior?

The video below shows a required matrix question, notice how the last row has a weird pink color that never disappears even after the error message disappears.

https://github.com/surveyjs/survey-library/assets/547021/890bf633-f82f-4ed6-8710-9413d7440fc3

What is the expected behavior?

The pink glow should disappear when the message disappears.

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

Trigger a validation error on a matrix question, then fill in the question correctly and notice the pink background color.

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

Tested page URL: https://surveyjs.io/create-free-survey

Test code

{
 "pages": [
  {
   "name": "page1",
   "elements": [
    {
     "type": "matrix",
     "name": "question1",
     "columns": [
      "Column 1",
      "Column 2"
     ],
     "rows": [
      "Row 1",
      "Row 2",
      "Row 3",
      "Row 4"
     ],
     "isAllRowRequired": true
    }
   ]
  }
 ],
 "widthMode": "static",
 "width": "650px"
}

Specify your

• browser: N/A
• browser version: N/A
• surveyjs platform (angular or react or jquery or knockout or vue): don't know
• surveyjs version: latest?

[nitin-pandita]

Hey @SamMousa I would like to give it a try

[SamMousa]

Try what? Fixing this issue? Feel free to give it a shot.

Note I'm not a maintainer of this repository so I don't have any power; they might not even classify it as a bug.

[SamMousa]

This problem is not fully fixed:

In cases where there's a survey complete trigger it still occurs.

{
 "pages": [
  {
   "name": "page1",
   "elements": [
    {
     "type": "radiogroup",
     "name": "question2",
     "choices": [
      "Item 1",
      "Item 2",
      "Item 3"
     ]
    },
    {
     "type": "matrix",
     "name": "question1",
     "columns": [
      "Column 1",
      "Column 2"
     ],
     "rows": [
      "Row 1",
      "Row 2",
      "Row 3",
      "Row 4"
     ],
     "isAllRowRequired": true
    }
   ]
  }
 ],
 "triggers": [
  {
   "type": "complete",
   "expression": "{question2} = 'Item 1'"
  }
 ],
 "widthMode": "static",
 "width": "650px"
}

Tested on https://surveyjs.io/create-free-survey as well as locally.

[SamMousa]

Please reopen!

[andrewtelnov]

@SamMousa I have created another issue since they are not related. We have modified the way we works with errors in questions and unfortunately, we did not have enough tests to see this issue.

Thank you, Andrew

[andrewtelnov]

@SamMousa We did not update our website yet. Everything is working in the latest version: Knockout and react.

I have added one more unit test into the master

Thank you, Andrew