fix: Fixed select skill endpoint dropdown

Composer/packages/extensions/adaptive-form/src/components/SchemaField.tsx

@@ -88,5 +88,5 @@ const SchemaField: React.FC<FieldProps> = props => {
   );
 };
 
-export { SchemaField };
+export { SchemaField, schemaField };
 export default SchemaField;

Composer/packages/ui-plugins/select-skill-dialog/src/BeginSkillDialogField.tsx

@@ -7,6 +7,8 @@ import { Link } from 'office-ui-fabric-react/lib/Link';
 import { ObjectField, SchemaField } from '@bfc/adaptive-form';
 import formatMessage from 'format-message';
 
+import { SkillEndpointField } from './SkillEndpointField';
+
 export const BeginSkillDialogField: React.FC<FieldProps> = props => {
   const { depth, id, schema, uiOptions, value, onChange } = props;
   const { projectId, skills = [] } = useShellApi();
@@ -27,7 +29,6 @@ export const BeginSkillDialogField: React.FC<FieldProps> = props => {
     onChange({ ...value, skillEndpoint, ...(msAppId ? { skillAppId: msAppId } : {}) });
   };
 
-  const skillEndpointSchema = { ...((schema?.properties?.skillEndpoint as JSONSchema7) || {}), enum: endpointOptions };
   const skillEndpointUiSchema = uiOptions.properties?.skillEndpoint || {};
   skillEndpointUiSchema.serializer = {
     get: value => {
@@ -52,11 +53,12 @@ export const BeginSkillDialogField: React.FC<FieldProps> = props => {
         value={value?.id}
         onChange={handleIdChange}
       />
-      <SchemaField
+      <SkillEndpointField
         depth={depth + 1}
         id={`${id}.skillEndpoint`}
         name="skillEndpoint"
-        schema={skillEndpointSchema}
+        schema={(schema?.properties?.skillEndpoint as JSONSchema7) || {}}
+        enumOptions={endpointOptions}
         rawErrors={{}}
         uiOptions={skillEndpointUiSchema}
         value={value?.skillEndpoint}

Composer/packages/ui-plugins/select-skill-dialog/src/SkillEndpointField.tsx

@@ -0,0 +1,51 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import React from 'react';
+import { FieldProps } from '@bfc/extension';
+import {
+  getUiLabel,
+  getUISchema,
+  getUiPlaceholder,
+  getUiDescription,
+  schemaField,
+  SelectField,
+  usePluginConfig,
+} from '@bfc/adaptive-form';
+
+export const SkillEndpointField: React.FC<FieldProps> = props => {
+  const { depth, schema, uiOptions: baseUIOptions, value, onChange } = props;
+  const pluginConfig = usePluginConfig();
+
+  const uiOptions = {
+    ...getUISchema(schema, pluginConfig.formSchema),
+    ...baseUIOptions,
+  };
+
+  const deserializedValue = typeof uiOptions?.serializer?.get === 'function' ? uiOptions.serializer.get(value) : value;
+
+  const handleChange = (newValue: any) => {
+    const serializedValue =
+      typeof uiOptions?.serializer?.set === 'function' ? uiOptions.serializer.set(newValue) : newValue;
+    onChange(serializedValue);
+  };
+
+  const label = getUiLabel({ ...props, uiOptions });
+  const placeholder = getUiPlaceholder({ ...props, uiOptions });
+  const description = getUiDescription({ ...props, uiOptions });
+
+  return (
+    <div css={schemaField.container(depth)}>
+      <SelectField
+        {...props}
+        value={deserializedValue}
+        description={description}
+        label={label}
+        placeholder={placeholder}
+        onChange={handleChange}
+      />
+    </div>
+  );
+};