fix expression field losing focus when error (#2408)

Co-authored-by: Chris Whitten <christopher.whitten@microsoft.com>
microsoft · Mar 28, 2020 · b8b6a18 · b8b6a18
1 parent 173809c
commit b8b6a18
Show file tree

Hide file tree

Showing 7 changed files with 65 additions and 38 deletions.
diff --git a/Composer/packages/extensions/adaptive-form/src/components/FormRow.tsx b/Composer/packages/extensions/adaptive-form/src/components/FormRow.tsx
@@ -19,6 +19,7 @@ const formRow = {
   row: css`
     display: flex;
     margin: 10px 18px;
+
     label: FormRowContainer;
   `,
   property: css`
@@ -28,6 +29,13 @@ const formRow = {
     & + & {
       margin-left: 16px;
     }
+
+    label: FormRowProperty;
+  `,
+  full: css`
+    flex: 1;
+
+    label: FormRow;
   `,
 };
 
@@ -81,6 +89,7 @@ const FormRow: React.FC<FormRowProps> = props => {
     return (
       <SchemaField
         key={`${id}.${row}`}
+        css={formRow.full}
         className={className}
         definitions={definitions}
         depth={depth}

diff --git a/Composer/packages/extensions/adaptive-form/src/components/SchemaField.tsx b/Composer/packages/extensions/adaptive-form/src/components/SchemaField.tsx
@@ -12,10 +12,13 @@ import { ErrorMessage } from './ErrorMessage';
 
 const schemaField = {
   container: (depth = 0) => css`
+    display: flex;
+    flex-direction: column;
     margin: 10px ${depth === 0 ? 18 : 0}px;
+
     label: SchemaFieldContainer;
   `,
-  field: css`
+  field: (hasError: boolean) => css`
     width: 100%;
     label: SchemaField;
   `,
@@ -32,6 +35,7 @@ const SchemaField: React.FC<FieldProps> = props => {
     rawErrors,
     hideError,
     onChange,
+    ...rest
   } = props;
   const pluginConfig = usePluginConfig();
   const schema = resolveRef(baseSchema, definitions);
@@ -56,7 +60,8 @@ const SchemaField: React.FC<FieldProps> = props => {
 
   const FieldWidget = resolveFieldWidget(schema, uiOptions, pluginConfig);
   const fieldProps = {
-    ...props,
+    ...rest,
+    name,
     uiOptions,
     enumOptions: schema.enum as string[],
     label: getUiLabel({ ...props, uiOptions }),
@@ -71,14 +76,8 @@ const SchemaField: React.FC<FieldProps> = props => {
 
   return (
     <div className={className} css={schemaField.container(props.depth)}>
-      {error && !hideError ? (
-        <div css={schemaField.field}>
-          <FieldWidget {...fieldProps} />
-          {error}
-        </div>
-      ) : (
-        <FieldWidget {...fieldProps} />
-      )}
+      <FieldWidget {...fieldProps} />
+      {!hideError && error}
     </div>
   );
 };

diff --git a/Composer/packages/extensions/adaptive-form/src/components/fields/ArrayField.tsx b/Composer/packages/extensions/adaptive-form/src/components/fields/ArrayField.tsx
@@ -18,7 +18,7 @@ import { UnsupportedField } from './UnsupportedField';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const ArrayField: React.FC<FieldProps<any[]>> = props => {
-  const { value = [], onChange, schema, label, description, id, rawErrors = [], uiOptions } = props;
+  const { value = [], onChange, schema, label, description, id, rawErrors = [], uiOptions, className, ...rest } = props;
   const [newValue, setNewValue] = useState<string>();
   const { arrayItems, handleChange, addItem } = useArrayItems(value, onChange);
 
@@ -43,12 +43,14 @@ const ArrayField: React.FC<FieldProps<any[]>> = props => {
   }
 
   return (
-    <div>
+    <div className={className}>
       <FieldLabel description={description} id={id} label={label} helpLink={uiOptions?.helpLink} />
       <div>
         {arrayItems.map((element, idx) => (
           <ArrayFieldItem
-            {...props}
+            {...rest}
+            id={id}
+            uiOptions={uiOptions}
             key={element.id}
             transparentBorder
             label={false}

diff --git a/Composer/packages/extensions/adaptive-form/src/components/fields/ArrayFieldItem.tsx b/Composer/packages/extensions/adaptive-form/src/components/fields/ArrayFieldItem.tsx
@@ -37,6 +37,7 @@ const ArrayFieldItem: React.FC<ArrayFieldItemProps> = props => {
     transparentBorder,
     uiOptions,
     value,
+    className,
     ...rest
   } = props;
 
@@ -81,7 +82,7 @@ const ArrayFieldItem: React.FC<ArrayFieldItemProps> = props => {
   };
 
   return (
-    <div css={arrayItem.container}>
+    <div className={className} css={arrayItem.container}>
       <div css={arrayItem.field}>
         <SchemaField
           {...rest}

diff --git a/Composer/packages/extensions/adaptive-form/src/components/fields/OneOfField.tsx b/Composer/packages/extensions/adaptive-form/src/components/fields/OneOfField.tsx
@@ -118,7 +118,7 @@ const OneOfField: React.FC<FieldProps> = props => {
   const Field = resolveFieldWidget(selectedSchema || {}, props.uiOptions, pluginConfig);
 
   return (
-    <React.Fragment>
+    <div css={oneOfField.container}>
       <div css={oneOfField.label}>
         <FieldLabel {...props} />
         {options && options.length > 1 && (
@@ -146,7 +146,7 @@ const OneOfField: React.FC<FieldProps> = props => {
         label={selectedSchema?.type === 'object' ? undefined : false}
         depth={props.depth - 1}
       />
-    </React.Fragment>
+    </div>
   );
 };
 

diff --git a/Composer/packages/extensions/adaptive-form/src/components/fields/styles.ts b/Composer/packages/extensions/adaptive-form/src/components/fields/styles.ts
@@ -11,12 +11,16 @@ export const arrayField = {
     margin-top: 0;
     margin-bottom: 0;
     display: flex;
+
+    label: ArrayFieldField;
   `,
 
   inputFieldContainer: css`
     border-top: 1px solid ${NeutralColors.gray30};
     display: flex;
     padding: 7px 0px;
+
+    label: ArrayFieldInputFieldContainer;
   `,
 };
 
@@ -49,34 +53,17 @@ export const arrayItem = {
     & + & {
       margin-left: ${stacked ? 0 : '16px'};
     }
+
+    label: ArrayItemSchemaFieldOverride;
   `,
 };
 
-export const objectItemLabel = css`
-  display: flex;
-`;
-
-export const objectItemValueLabel = css`
-  color: ${NeutralColors.gray130};
-  flex: 1;
-  font-size: 14px;
-  margin-left: 7px;
-  & + & {
-    margin-left: 20px;
-  }
-`;
-
-export const objectItemInputField = css`
-  flex: 1;
-  & + & {
-    margin-left: 20px;
-  }
-`;
-
 export const unsupportedField = {
   container: css`
     display: flex;
     justify-content: space-between;
+
+    label: UnsupportedFieldContainer;
   `,
   link: {
     root: {
@@ -91,23 +78,31 @@ export const unsupportedField = {
     overflow-x: scroll;
     overflow-y: none;
     padding: ${hidden ? '0px' : '1rem'};
+
+    label: UnsupportedFieldDetails;
   `,
 };
 
 export const openObjectField = {
   container: css`
     border-top: 1px solid ${NeutralColors.gray30};
     display: flex;
+
+    label: OpenObjectFieldContainer;
   `,
   filler: css`
     width: 32px;
+
+    label: OpenObjectFieldFiller;
   `,
   item: css`
     flex: 1;
 
     & + & {
       margin-left: 16px;
     }
+
+    label: OpenObjectFieldItem;
   `,
   label: css`
     flex: 1;
@@ -116,15 +111,21 @@ export const openObjectField = {
     & + & {
       margin-left: 16px;
     }
+
+    label: OpenObjectFieldLabel;
   `,
   labelContainer: css`
     display: flex;
+
+    label: OpenObjectFieldLabelContainer;
   `,
 };
 
 export const objectArrayField = {
   objectItemLabel: css`
     display: flex;
+
+    label: ObjectItemLabel;
   `,
 
   objectItemValueLabel: css`
@@ -135,31 +136,46 @@ export const objectArrayField = {
     & + & {
       margin-left: 20px;
     }
+
+    label: ObjectItemValueLabel;
   `,
 
   objectItemInputField: css`
     flex: 1;
     & + & {
       margin-left: 20px;
     }
+
+    label: ObjectItemInputField;
   `,
 
   arrayItemField: css`
     flex: 1;
     display: flex;
     min-width: 0;
+
+    label: ArrayItemField;
   `,
 
   inputFieldContainer: css`
     border-top: 1px solid ${NeutralColors.gray30};
     display: flex;
     padding: 7px 0;
+
+    label: InputFieldContainer;
   `,
 };
 
 export const oneOfField = {
+  container: css`
+    width: 100%;
+
+    label: OneOfField;
+  `,
   label: css`
     display: flex;
     justify-content: space-between;
+
+    label: OneOfFieldLabel;
   `,
 };
diff --git a/Composer/packages/ui-plugins/prompts/src/PromptField/ChoiceInputSettings.tsx b/Composer/packages/ui-plugins/prompts/src/PromptField/ChoiceInputSettings.tsx
@@ -44,7 +44,7 @@ const ChoiceInputSettings: React.FC<ChoiceInputSettingsProps> = props => {
       <SchemaField
         css={styles.choiceOptions}
         definitions={definitions}
-        depth={depth}
+        depth={depth + 1}
         id={`${id}.choiceOptions`}
         name="choiceOptions"
         schema={getSchema('choiceOptions')}