fix: correct multiline in LG page list view (#5220)

* improve multiline exprience in EditableField

* EditableField allow navigations

* minor changes

* synthetic events can do it too!

Co-authored-by: Dong Lei <donglei@microsoft.com>
Co-authored-by: Chris Whitten <christopher.whitten@microsoft.com>
Co-authored-by: Andy Brown <asbrown002@gmail.com>
Co-authored-by: Soroush <hatpick@gmail.com>
Co-authored-by: Soroush <sorgh@microsoft.com>

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

@@ -10,6 +10,9 @@ import { IconButton } from 'office-ui-fabric-react/lib/Button';
 import { IIconProps } from 'office-ui-fabric-react/lib/Icon';
 
 import { FieldConfig, useForm } from '../hooks/useForm';
+
+const allowedNavigationKeys = ['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight', 'PageDown', 'PageUp', 'Home', 'End'];
+
 //------------------------
 const defaultContainerStyle = (hasFocus, hasErrors) => css`
   display: flex;
@@ -36,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>;
@@ -122,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);
       }
     }
@@ -142,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);
@@ -171,12 +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') {