BUG: Select Box show as empty when current value doesnt match anymore the values

[mhsdesign]

Currently a mismatch from datasource to current value will be displayed falsely as being empty. We should make it obvious that the value didnt match.

Simple reproduction

have a selectbox option with defined values:

tagName:
  type: string
  defaultValue: 'h2'
  ui:
    label: i18n
    reloadIfChanged: true
    inspector:
      group: settings
      position: 10
      editor: Neos.Neos/Inspector/Editors/SelectBoxEditor
      editorOptions:
        values:
          h1:
            label: h1
          h2:
            label: h2
          h3:
            label: h3
          h4:
            label: h4
          h5:
            label: h5

set it to for example to h5 in the ui and then change the node type to remove the option.
Reload the ui and see this:

it seems the property is not set at all, but you are mistaken it is just shown as empty. Additionally a not empty validator wouldnt complain as the property is actually not empty.

This behaviour should be improved.

A similar buggy behaviour also exists for selectboxes with allowEmpty: true
after the above steps a mismatch is also being shown as empty but one still has the X delete button, which gives a hint that its not really empty after all.

And the same for multiple: true

when adding a new element in multiple: true it behaves buggy when deleting one item as its stays after the first click (one deletes the empty value or something)

[mhsdesign]

For the case of multi select-boxes, the ordering feature doesnt work anymore if there are outdated values in between.

By generating a label beforehand, this will not be a problem but still for the standalone case.

Broken (the option h3 was removed from the schema):

Bildschirmaufnahme.2024-06-27.um.10.42.09.mov

Expected:

Bildschirmaufnahme.2024-06-27.um.10.40.16.mov

The reason for this is the bool filter here is broken. we must keep the real index see daggableValues[dragIndex];:

neos-ui/packages/react-ui-components/src/MultiSelectBox_ListPreviewSortable/multiSelectBox_ListPreviewSortable.js

Lines 70 to 75 in f89267a

	).filter(Boolean);
	return draggableOptions.map(this.renderOption);
	}
	renderOption = (option, index) => {