When the radio is readOnly, the value selected or default doesn't appear

[FilipiRafael]

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

Bug

What is the current behavior?

When the radio is readOnly, the value selected or default doesn't appear

What is the expected behavior?

The value should appear as the other fields, comment for example, appear the value even if it's readOnly

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

{
  "elements": [
    {
      "name": "411",
      "type": "panel",
      "title": "Structural Engineering",
      "keyName": "name",
      "elements": [
        {
          "name": "documents_uploaded_2687",
          "type": "radiogroup",
          "title": "Documents Uploaded",
          "choices": [
            "No",
            "Yes"
          ],
          "colCount": 4,
          "visibleIf": true,
          "isRequired": true,
          "defaultValue": "No",
          "requiredErrorText": "Value cannot be empty"
        },
        {
          "name": "comment_3275",
          "type": "comment",
          "title": "Comment",
          "maxLength": 200,
          "visibleIf": true,
          "isRequired": false,
          "defaultValue": "",
          "requiredErrorText": "Value cannot be empty"
        }
      ],
      "description": "Structural Engineering",
      "showQuestionNumbers": "off"
    }
  ],
  "showQuestionNumbers": "off",
  "questionErrorLocation": "bottom"
}

The above json is what I was using to generate the follow form:

As you can see I can't see the value of the radio field, but if I remove the readOnly prop, it shows normally.

Then I created with the survey creator the same radio readOnly form to see if there's something different, I got the form working well, but the json form is the same and it doesn't worked for me.

Form and json returned by survey creator:

{
 "logoPosition": "right",
 "pages": [
  {
   "name": "page1",
   "elements": [
    {
     "type": "radiogroup",
     "name": "question1",
     "title": "question",
     "defaultValue": "Item 1",
     "isRequired": true,
     "readOnly": true,
     "choices": [
      "Item 1",
      "Item 2",
      "Item 3"
     ]
    }
   ]
  }
 ]
}

By the way, I also tried that prop clearValueOnDisableItems but it also didn't work. FYI, the way we're showing the form is by saving the JSON in the database and then showing it in the front end.

Let me show an example:

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

Tested page URL:

Test code

your_code_here

Specify your

• browser: Chrome
• browser version: 123.0.6312.106 (Official Build) (arm64)
• surveyjs platform (angular or react or jquery or knockout or vue): JQuery
• surveyjs version:

[JaneSjs]

Hello @FilipiRafael, Thank you for the comprehensive explanation and sharing the relevant code and screenshots. I created the following demo to confirm that Radiogroup correctly displays a default value: View Plunker. If you programmatically assign a new response object to the survey.data property, note that the new response will override default question values. If you need to programmatically assign user responses and keep default question values, use the survey.mergeData(newResponseObj) function.

Please let me know if this helps. Additionally, please ensure that your SurveyJS Form Library is up-to-date.

I look forward to your reply.

[FilipiRafael]

Hello @JaneSjs Thanks for your quick reply. The data we are using in the survey.data in this case, is coming from our database. As I showed above, when the form is not readonly the answer is displayed. When we set the form to read-only the answers for radio control are cleared. We need to have the answer showing like text box, for example.

[FilipiRafael]

Hey @JaneSjs, another question is about design. When those fields are readOnly, can we remove that opacity? I didn't find any prop to do that, thanks. I just want normal design fields, but readOnly, not editable, you know?

[FilipiRafael]

Still about the first question, the same problem as occurs with radio fields, occurs with select and checkbox, but as you can see in the following screenshot, it's not happening with normal text fields.

[FilipiRafael]

Hey @JaneSjs, sorry to ask, but did you find out something? Thanks :)

[JaneSjs]

Hello @FilipiRafael, Please accept my apologies for the delayed reply.

Regarding the first question: unfortunately, I couldn't reproduce it on my end. I created the following demo for your reference: View Plunker.

I would recommend that you ensure that you're using the latest version of SurveyJS libraries. If you require further assistance, please share a problematic demo for research.

Regarding the read-only item appearance: we are currently working on this task. https://github.com/surveyjs/survey-library/issues/6776

In the meantime, you can disable the opacity using CSS. Check the following demo: View Demo.

I look forward to your reply.

[FilipiRafael]

Hey @JaneSjs, thank you very much for the answer and all the resources and issues that you sent to me :), but I solved it all only using CSS now, I realize that when the checkbox and radio fields, for example, are read-only, they don't show the checked value, because of the CSS class used .sd-item--disabled.sd-item--checked .sd-item__decorator {. If you wanna know more please let me know, but you can now close this issue, thanks 🥇