Dropdown with `choicesByUrl`: `defaultValue` resolves to "Other" when `showOtherItem` is enabled

[willnippard]

Describe the bug
A dropdown with a complex (object) value appears as Other [object Object] iff 'Enable the "Option" option' is turned on, instead of showing it's intended display value (label).
Note: the actual value saved stays correct. Best guess is a lazy/eager load issue, or similar, from what I can see.

Steps to reproduce

1. Set up dropdown with choicesByUrl, and set up to store complex (object) values
2. Set a default value for the dropdown
3. Enable Other option
4. See [object Object] in dropdown selection.

Expected behavior
Dropdown appears with the correct label.

Screenshots

Please complete the following information:

• Browser: tested on Chrome, Firefox, and Safari
• Browser version: various, all recent
• JS framework/library: React
• SurveyJS version: 2.5.8
• Device: laptop & iPhone

[JaneSjs]

Hi @willnippard,
Could you please share a sample survey or dropdown JSON that includes the choicesByUrl configuration, along with a sample API response for the choices? This will help me reproduce the issue on my end.

[willnippard]

Hi @JaneSjs, definitely!

Here is a lightweight JSON that should have everything needed for testing, using a public example API I found.

{
  "pages": [
    {
      "name": "page1",
      "elements": [
        {
          "type": "dropdown",
          "name": "question1",
          "title": "Dropdown Example",
          "defaultValue": {
            "generation": "3rd",
            "price": 120
          },
          "choicesByUrl": {
            "url": "https://api.restful-api.dev/objects",
            "valueName": "data",
            "titleName": "name"
          },
          "showOtherItem": true
        }
      ]
    }
  ],
  "checkErrorsMode": "onValueChanged"
}

Oddly, I find that it works as expected in the Creator (first image below), it's only the 'public' or published view that we're seeing this issue.

So this should show that issue and then if you remove the line "showOtherItem": true it works as expected!

[willnippard]

And the actual API response is:

[{"id":"1","name":"Google Pixel 6 Pro","data":{"color":"Cloudy White","capacity":"128 GB"}},{"id":"2","name":"Apple iPhone 12 Mini, 256GB, Blue","data":null},{"id":"3","name":"Apple iPhone 12 Pro Max","data":{"color":"Cloudy White","capacity GB":512}},{"id":"4","name":"Apple iPhone 11, 64GB","data":{"price":389.99,"color":"Purple"}},{"id":"5","name":"Samsung Galaxy Z Fold2","data":{"price":689.99,"color":"Brown"}},{"id":"6","name":"Apple AirPods","data":{"generation":"3rd","price":120}},{"id":"7","name":"Apple MacBook Pro 16","data":{"year":2019,"price":1849.99,"CPU model":"Intel Core i9","Hard disk size":"1 TB"}},{"id":"8","name":"Apple Watch Series 8","data":{"Strap Colour":"Elderberry","Case Size":"41mm"}},{"id":"9","name":"Beats Studio3 Wireless","data":{"Color":"Red","Description":"High-performance wireless noise cancelling headphones"}},{"id":"10","name":"Apple iPad Mini 5th Gen","data":{"Capacity":"64 GB","Screen size":7.9}},{"id":"11","name":"Apple iPad Mini 5th Gen","data":{"Capacity":"254 GB","Screen size":7.9}},{"id":"12","name":"Apple iPad Air","data":{"Generation":"4th","Price":"419.99","Capacity":"64 GB"}},{"id":"13","name":"Apple iPad Air","data":{"Generation":"4th","Price":"519.99","Capacity":"256 GB"}}]

But that should all be public too, so you can open up that url directly, if easier!

[JaneSjs]

Hi,
Thank you for the update.
The Dropdown question's value expects a primitive object rather than a complex object. I suggest that you update your choicesByUrl configuration object and set valueName to "id".

However, it seems that even though valueName is set to "id", a Dropdown still treats it as the Other value.
Codesandbox

We'll research this issue and let you know our results.

Please stay tuned.