Show pre-configured component display name rather than ref in ref choice dropdown

Author: raymond-lam

src/formBuilder/defaults/referenceInputs.js

@@ -27,17 +27,26 @@ function RefChoice({
   parameters: Parameters,
   onChange: (newParams: Parameters) => void,
 }) {
+  const pathArr = (parameters.$ref || '').split('/');
+  const currentValueLabel =
+    pathArr.length === 3 &&
+    pathArr[0] === '#' &&
+    pathArr[1] === 'definitions' &&
+    (parameters.definitionData || {})[pathArr[2]]
+      ? parameters.definitionData[pathArr[2]].title || parameters.$ref
+      : parameters.$ref;
+
   return (
     <div className='card-select'>
       <Select
         value={{
           value: parameters.$ref,
-          label: parameters.$ref,
+          label: currentValueLabel,
         }}
         placeholder='Reference'
         options={Object.keys(parameters.definitionData || {}).map((key) => ({
           value: `#/definitions/${key}`,
-          label: `#/definitions/${key}`,
+          label: parameters.definitionData[key].title || `#/definitions/${key}`,
         }))}
         onChange={(val: any) => {
           onChange({ ...parameters, $ref: val.value });