fix: Fixed Multiple Choice Type undo/redo functionality (#1844)

* Fixed multiple choice type undo/redo functionality * Fixed input width Co-authored-by: Dong Lei <donglei@microsoft.com> Co-authored-by: Chris Whitten <christopher.whitten@microsoft.com>
microsoft · Jan 11, 2020 · 56f0976 · 56f0976
1 parent 1646122
commit 56f0976
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 13 deletions.
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/ArrayFieldTemplate/StringArray.tsx b/Composer/packages/extensions/obiformeditor/src/Form/ArrayFieldTemplate/StringArray.tsx
@@ -53,6 +53,7 @@ const StringArray: React.FunctionComponent<ArrayFieldTemplateProps> = props => {
                 iconName: 'ReturnKey',
                 style: { color: SharedColors.cyanBlue10, opacity: 0.6 },
               }}
+              styles={{ root: { width: '100%' } }}
               data-testid="string-array-text-input"
             />
           </div>

diff --git a/...ser/packages/extensions/obiformeditor/src/Form/fields/PromptField/ChoiceInput/Choices.tsx b/...ser/packages/extensions/obiformeditor/src/Form/fields/PromptField/ChoiceInput/Choices.tsx
@@ -3,7 +3,7 @@
 
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Dropdown, ResponsiveMode } from 'office-ui-fabric-react/lib/Dropdown';
 import { JSONSchema6 } from 'json-schema';
 import { IChoice } from '@bfc/shared';
@@ -47,6 +47,10 @@ export const Choices: React.FC<ChoicesProps> = props => {
     [choiceType, onchange, setChoiceType]
   );
 
+  useEffect(() => {
+    setChoiceType(Array.isArray(formData ?? []) && typeof formData !== 'string' ? 'static' : 'dynamic');
+  }, [formData]);
+
   return (
     <React.Fragment>
       <div style={{ display: 'flex', justifyContent: 'space-between', padding: '5px 0' }}>
@@ -60,19 +64,21 @@ export const Choices: React.FC<ChoicesProps> = props => {
           }
           id={id}
         />
-        <Dropdown
-          styles={{
-            caretDownWrapper: { height: '24px', lineHeight: '24px' },
-            root: { padding: '7px 0', width: '100px' },
-            title: { height: '24px', lineHeight: '20px' },
-          }}
-          onChange={handleChange}
-          options={options}
-          selectedKey={choiceType}
-          responsiveMode={ResponsiveMode.large}
-        />
+        {options.length > 0 && (
+          <Dropdown
+            styles={{
+              caretDownWrapper: { height: '24px', lineHeight: '24px' },
+              root: { padding: '7px 0', width: '100px' },
+              title: { height: '24px', lineHeight: '20px' },
+            }}
+            onChange={handleChange}
+            options={options}
+            selectedKey={choiceType}
+            responsiveMode={ResponsiveMode.large}
+          />
+        )}
       </div>
-      {choiceType === 'static' ? (
+      {!options || choiceType === 'static' ? (
         <StaticChoices {...props} />
       ) : (
         <DynamicChoices {...props} formContext={formContext} schema={dynamicSchema as JSONSchema6} />