ESC-240: Fix null pointer exception in SelectInput getOptionName method

Author: JhumanJ

client/components/forms/SelectInput.vue

@@ -101,29 +101,29 @@
 </template>
 
 <script>
-import {inputProps, useFormInput} from './useFormInput.js'
+import { inputProps, useFormInput } from './useFormInput.js'
 import InputWrapper from './components/InputWrapper.vue'
 
 /**
  * Options: {name,value} objects
  */
 export default {
   name: 'SelectInput',
-  components: {InputWrapper},
+  components: { InputWrapper },
 
   props: {
     ...inputProps,
-    options: {type: Array, required: true},
-    optionKey: {type: String, default: 'value'},
-    emitKey: {type: String, default: 'value'},
-    displayKey: {type: String, default: 'name'},
-    loading: {type: Boolean, default: false},
-    multiple: {type: Boolean, default: false},
-    searchable: {type: Boolean, default: false},
-    clearable: {type: Boolean, default: false},
-    allowCreation: {type: Boolean, default: false},
-    dropdownClass: {type: String, default: 'w-full'},
-    remote: {type: Function, default: null}
+    options: { type: Array, required: true },
+    optionKey: { type: String, default: 'value' },
+    emitKey: { type: String, default: 'value' },
+    displayKey: { type: String, default: 'name' },
+    loading: { type: Boolean, default: false },
+    multiple: { type: Boolean, default: false },
+    searchable: { type: Boolean, default: false },
+    clearable: { type: Boolean, default: false },
+    allowCreation: { type: Boolean, default: false },
+    dropdownClass: { type: String, default: 'w-full' },
+    remote: { type: Function, default: null }
   },
   setup(props, context) {
     return {
@@ -160,8 +160,10 @@ export default {
         return optionCandidate[this.optionKey] === val ||
           (typeof val === 'object' && optionCandidate[this.optionKey] === val[this.optionKey])
       })
-      if (option) return option[this.displayKey]
-      return null
+      if (option && option[this.displayKey] !== undefined) {
+        return option[this.displayKey]
+      }
+      return val // Return the original value if no matching option is found
     },
     getOptionNames(values) {
       return values.map(val => {

client/nuxt.config.ts

@@ -60,6 +60,11 @@ export default defineNuxtConfig({
                 project: "opnform-vue",
             }),
         ],
+        server: {
+            hmr: {
+                clientPort: 3000
+            }
+        }
     },
     tailwindcss: {
         cssPath: ['~/scss/app.scss']