@@ -270,11 +270,18 @@ const FieldContent: React.FC<{ field: MetadataField, readonly?: boolean }> = ({
270270 ? generateReactSelectLibrary ( field )
271271 : [ ] ;
272272
273+ const toSelectValue = ( value : string ) => {
274+ const found = selectOptions . find ( opt => opt . value === value ) ;
275+
276+ return {
277+ value,
278+ label : found ?. label ?? value ,
279+ } ;
280+ } ;
273281
274282 const currentSelectValue = isMulti
275- // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
276- ? selectOptions . filter ( opt => ( localValue as unknown as string [ ] ) . includes ( opt . value ) )
277- : selectOptions . find ( opt => opt . value === localValue ) ;
283+ ? ( localValue as unknown as string [ ] ) . map ( toSelectValue )
284+ : toSelectValue ( localValue ) ;
278285
279286 const handleTextChange = ( e : React . ChangeEvent < HTMLInputElement | HTMLTextAreaElement > ) => {
280287 setLocalValue ( e . target . value ) ;
@@ -380,7 +387,7 @@ const FieldContent: React.FC<{ field: MetadataField, readonly?: boolean }> = ({
380387 isSearchable = { ! readonly } // by setting other settings
381388 openMenuOnClick = { ! readonly }
382389 menuIsOpen = { readonly ? false : undefined }
383- options = { generateReactSelectLibrary ( field ) }
390+ options = { field . collection ? generateReactSelectLibrary ( field ) : [ ] }
384391 styles = { selectFieldStyle ( theme ) }
385392 name = { field . name }
386393 css = { fieldTypeStyle ( readonly ) } >
@@ -403,7 +410,23 @@ const FieldContent: React.FC<{ field: MetadataField, readonly?: boolean }> = ({
403410 </ Select >
404411 ) ;
405412 }
406-
413+ } else if ( field . type === "mixed_text" ) {
414+ return (
415+ < CreatableSelect
416+ onChange = { handleSelectChange }
417+ onBlur = { commitImmediately }
418+ value = { currentSelectValue }
419+ isMulti
420+ isClearable = { ! readonly } // The component does not support readOnly, so we have to work around
421+ isSearchable = { ! readonly } // by setting other settings
422+ openMenuOnClick = { ! readonly }
423+ menuIsOpen = { readonly ? false : undefined }
424+ options = { field . collection ? generateReactSelectLibrary ( field ) : [ ] }
425+ styles = { selectFieldStyle ( theme ) }
426+ name = { field . name }
427+ css = { fieldTypeStyle ( readonly ) } >
428+ </ CreatableSelect >
429+ ) ;
407430 } else if ( field . type === "date" ) {
408431 return (
409432 < ThemeProvider theme = { calendarStyle ( theme ) } >
0 commit comments