BUGFIX: WIP: Show if selectbox options mismatch with current value

neos · Jun 12, 2023 · 033b086 · 033b086
1 parent 7ea5dd7
commit 033b086
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 8 deletions.
diff --git a/...i-components/src/MultiSelectBox_ListPreviewSortable/multiSelectBox_ListPreviewSortable.js b/...i-components/src/MultiSelectBox_ListPreviewSortable/multiSelectBox_ListPreviewSortable.js
@@ -66,8 +66,11 @@ export default class MultiSelectBox_ListPreviewSortable extends PureComponent {
 
         // Sorted options by draggable value ordering
         const draggableOptions = draggableValues.map(value =>
-            options.find(option => optionValueAccessor(option) === value)
-        ).filter(Boolean);
+            options.find(option => optionValueAccessor(option) === value) || {
+                label: `Invalid: "${value}"`,
+                icon: 'exclamation-triangle'
+            }
+        );
 
         return draggableOptions.map(this.renderOption);
     }

diff --git a/packages/react-ui-components/src/SelectBox/selectBox.js b/packages/react-ui-components/src/SelectBox/selectBox.js
@@ -266,12 +266,13 @@ export default class SelectBox extends PureComponent {
         // Compare selected value less strictly: allow loose comparision and deep equality of objects
         const selectedOption = options.find(option => optionValueAccessor(option) == value || isEqual(optionValueAccessor(option), value)); // eslint-disable-line eqeqeq
 
+        // check for null or undefined
+        /* eslint-disable no-eq-null, eqeqeq */
+        const valueIsEmpty = value == null || value === '';
+
         if (
             displaySearchBox && (
-                // check for null or undefined
-                /* eslint-disable no-eq-null, eqeqeq */
-                value == null ||
-                value === '' ||
+                valueIsEmpty ||
                 this.state.isExpanded ||
                 plainInputMode
             )
@@ -287,12 +288,18 @@ export default class SelectBox extends PureComponent {
             );
         }
 
-        const showResetButton = Boolean(allowEmpty && !displayLoadingIndicator && value);
+        const mismatchOfValueInOptions = !valueIsEmpty && !selectedOption;
+        const showResetButton = (allowEmpty && !displayLoadingIndicator && !valueIsEmpty) || mismatchOfValueInOptions;
 
         return (
             <SelectBox_Header
                 {...this.props}
-                option={selectedOption}
+                option={mismatchOfValueInOptions
+                    ? {
+                        label: `Invalid: "${value}"`,
+                        icon: 'exclamation-triangle'
+                    } : selectedOption
+                }
                 showResetButton={showResetButton}
                 onReset={this.handleDeleteClick}
                 onClick={onHeaderClick}