Bug when using multi select with custom title

[maciejpolanczyk]

Actual result: In multi select (https://bhch.github.io/react-json-form/playground/#5-multi-select-choices) when you replaces original choices with choices from (https://bhch.github.io/react-json-form/playground/#4-choices-with-custom-titles) you will see custom title in dropdown box but after selecting it you will see a value, instead of custom title - this is a bug

Expected result: when using multi select with custom title I should be able to see custom title in dropdown box and after selecting it. Value should be pass as a result. Like in https://bhch.github.io/react-json-form/playground/#4-choices-with-custom-titles

Please make sure that the fix will work fine with autocomplete feature.

Version: current version in playground

[bhch]

Hi. Thanks for reporting the issue.

This has been fixed in v2.21.3. Please update and test it out.

[maciejpolanczyk]

Thanks for quick response. I checked and it works but i notice that probably after this fix "multiselect-autocomplete" stopped working. Demo page is not loading, error from console log:

react-dom.production.min.js:141 TypeError: Cannot read properties of undefined (reading 'length')
    at playground.js:3:23599
    at t.render (playground.js:3:23705)
    at Te (react-dom.production.min.js:119:308)
    at Ch (react-dom.production.min.js:119:105)
    at Pj (react-dom.production.min.js:233:139)
    at di (react-dom.production.min.js:168:305)
    at Nj (react-dom.production.min.js:168:236)
    at sc (react-dom.production.min.js:168:96)
    at gf (react-dom.production.min.js:162:109)
    at react-dom.production.min.js:73:230
overrideMethod @ console.js:213
Ye @ react-dom.production.min.js:141
Mh.c.callback @ react-dom.production.min.js:141
dh @ react-dom.production.min.js:80
Bj @ react-dom.production.min.js:145
Qj @ react-dom.production.min.js:176
unstable_runWithPriority @ react.production.min.js:24
Za @ react-dom.production.min.js:73
eb @ react-dom.production.min.js:170
gf @ react-dom.production.min.js:162
(anonymous) @ react-dom.production.min.js:73
unstable_runWithPriority @ react.production.min.js:24
Za @ react-dom.production.min.js:73
$g @ react-dom.production.min.js:73
ja @ react-dom.production.min.js:73
vk.Events.current @ react-dom.production.min.js:240
Ki @ react-dom.production.min.js:44
Show 1 more frame
Show less
react-dom.production.min.js:73 Uncaught TypeError: Cannot read properties of undefined (reading 'length')
    at playground.js:3:23599
    at t.render (playground.js:3:23705)
    at Te (react-dom.production.min.js:119:308)
    at Ch (react-dom.production.min.js:119:105)
    at Pj (react-dom.production.min.js:233:139)
    at di (react-dom.production.min.js:168:305)
    at Nj (react-dom.production.min.js:168:236)
    at sc (react-dom.production.min.js:168:96)
    at gf (react-dom.production.min.js:162:109)
    at react-dom.production.min.js:73:230

In addition could you also fix custom title feature for array fields with autocomplete?

'type': 'array',
'items': {
    'type': 'string',
    'widget': 'autocomplete',
    'handler': '...',
}

@bhch

[bhch]

Damn! Thanks for catching it. I'll release the fix soon.

In addition could you also fix custom title feature for array fields with autocomplete?

This will not work for autocomplete because the choices are loaded dynamically, so the form has no way of knowing the custom title of a value.

We can cache the options for the current session but suppose when the user saves the form data and reloads the page, the cached options will be gone and the form will show the bare values instead of the titles.

Other ideas?

[maciejpolanczyk]

no ideas, cache doesn't sound like a solution for me needs i can have a workaround but would be good to fix it in future

[bhch]

Fix released in v2.21.4. Please upgrade and test it out.

Thank you.