VfSmartSelect: fix invalid value loading; add isNotNullOrUndefined

Author: fergusean

demo/components/demo-vf-smart-select.vue

@@ -42,6 +42,19 @@
 
             Selected value: {{ selectedDelayedOption2 ?? '-' }}
         </div>
+
+        <div>
+            <VfSmartSelect
+                v-model="selectedDelayedOption3"
+                :options="delayedOptions"
+                label-field="label"
+                value-field="value"
+                group-field="group"
+                null-title="No selection"
+            />
+
+            Selected value: {{ selectedDelayedOption3 ?? '-' }}
+        </div>
     </div>
 </template>
 
@@ -75,7 +88,8 @@ const delayedOptions = ref<IOption[]>();
 const selectedInstantOption1 = ref<IOption | null>(null);
 const selectedInstantOption2 = ref<IOption | null>(null);
 const selectedDelayedOption1 = ref<IOption | null>(options[1]);
-const selectedDelayedOption2 = ref<string | null>(options[1].value);
+const selectedDelayedOption2 = ref<string | null>('2');
+const selectedDelayedOption3 = ref<string | null>('19'); // intentionally invalid value
 
 function setDelayedOptions() {
     delayedOptions.value = cloneDeep(options);

package.json

@@ -1,7 +1,7 @@
 {
     "name": "@signal24/vue-foundation",
     "type": "module",
-    "version": "4.25.4",
+    "version": "4.25.5",
     "description": "Common components, directives, and helpers for Vue 3 apps",
     "module": "./dist/vue-foundation.es.js",
     "exports": {

src/components/vf-smart-select.vue

@@ -53,6 +53,8 @@
 import { debounce, groupBy, isEqual, uniq } from 'lodash';
 import { computed, onMounted, ref, watch } from 'vue';
 
+import { isNotNullOrUndefined } from '@/helpers';
+
 import { escapeHtml } from '../helpers/string';
 import type { VfSmartSelectOptionDescriptor } from './vf-smart-select.types';
 
@@ -321,7 +323,7 @@ onMounted(async () => {
         if (selectedOption.value !== props.modelValue) {
             emit(
                 'update:modelValue',
-                selectedOption.value !== null && effectiveValueExtractor.value !== null
+                isNotNullOrUndefined(selectedOption.value) && effectiveValueExtractor.value !== null
                     ? effectiveValueExtractor.value(selectedOption.value)
                     : selectedOption.value
             );
@@ -559,7 +561,7 @@ function handleValueChanged() {
         selectedOption.value = effectiveValueExtractor.value
             ? allOptions.value.find(o => props.modelValue === effectiveValueExtractor.value!(o))
             : props.modelValue;
-        selectedOptionTitle.value = selectedOption.value !== null ? effectiveSelectionFormatter.value(selectedOption.value) : null;
+        selectedOptionTitle.value = isNotNullOrUndefined(selectedOption.value) ? effectiveSelectionFormatter.value(selectedOption.value) : null;
         searchText.value = selectedOptionTitle.value ?? '';
     } else {
         selectedOption.value = null;

src/helpers/object.ts

@@ -18,3 +18,7 @@ export function nullifyEmptyInputs<T extends Record<string, unknown>, K extends
     }
     return result;
 }
+
+export function isNotNullOrUndefined<T>(value: T | null | undefined): value is T {
+    return value !== null && value !== undefined;
+}