Merge branch 'zhixzhan/lg-listview-editable-filed' of https://github.…

…com/microsoft/BotFramework-Composer into sorgh/fix_editable_field

Composer/packages/client/src/components/EditableField.tsx

@@ -39,6 +39,17 @@ const defaultContainerStyle = (hasFocus, hasErrors) => css`
 // turncat to show two line.
 const maxCharacterNumbers = 120;
 
+const isMultiLineText = (value?: string): boolean => {
+  if (!value) return false;
+  const valueTrimmed = value.trim();
+  return (
+    valueTrimmed.length > maxCharacterNumbers ||
+    valueTrimmed.includes('\r') ||
+    valueTrimmed.includes('\r\n') ||
+    valueTrimmed.includes('\n')
+  );
+};
+
 //------------------------
 type IconProps = {
   iconStyles?: Partial<IIconProps>;
@@ -125,13 +136,13 @@ const EditableField: React.FC<EditableFieldProps> = (props) => {
   }, [value]);
 
   useEffect(() => {
-    if (formData.value.length > maxCharacterNumbers) {
+    if (isMultiLineText(formData.value)) {
       setMultiline(true);
       return;
     }
 
     if (expanded || hasFocus) {
-      if (formData.value.length > maxCharacterNumbers) {
+      if (isMultiLineText(formData.value)) {
         setMultiline(true);
       }
     }
@@ -145,7 +156,7 @@ const EditableField: React.FC<EditableFieldProps> = (props) => {
   };
 
   const handleChange = (_e: any, newValue?: string) => {
-    if (newValue && newValue?.length > maxCharacterNumbers) setMultiline(true);
+    if (isMultiLineText(newValue)) setMultiline(true);
     updateField('value', newValue);
     setHasBeenEdited(true);
     onChange(newValue);
@@ -174,16 +185,17 @@ const EditableField: React.FC<EditableFieldProps> = (props) => {
     fieldRef.current?.blur();
   };
 
-  // single line, press Enter to submit
-  // multipe line, press Enter to submit, Shift+Enter get a new line,
+  // press Enter to submit, Shift+Enter get a new line,
   const handleOnKeyDown = (e) => {
     // This prevents host DetailsList's FocusZone from stealing the focus and consuming the navigation keys.
     if (allowedNavigationKeys.includes(e.key)) {
       e.stopPropagation();
     }
     const enterOnField = e.key === 'Enter' && hasFocus;
-    const multilineEnter = multiline ? !e.shiftKey : true;
-    if (enterOnField && multilineEnter) {
+    if (enterOnField && !multiline) {
+      setMultiline(true);
+    }
+    if (enterOnField && !e.shiftKey) {
       handleCommit();
     }
     if (e.key === 'Escape') {