fix(component): nowrap inline-edit (#5844)

toeverything · Feb 21, 2024 · ed0d67e · ed0d67e
1 parent 201f680
commit ed0d67e
Showing 1 changed file with 8 additions and 2 deletions.
diff --git a/packages/frontend/component/src/ui/editable/inline-edit.tsx b/packages/frontend/component/src/ui/editable/inline-edit.tsx
@@ -7,6 +7,7 @@ import {
   useCallback,
   useEffect,
   useImperativeHandle,
+  useMemo,
   useRef,
   useState,
 } from 'react';
@@ -139,6 +140,11 @@ export const InlineEdit = ({
     setEditingValue(value);
   }, [value]);
 
+  // to make sure text is not wrapped, and multi-space is shown normally
+  const displayValue = useMemo(() => {
+    return editingValue ? editingValue.replace(/\n/g, '') : '';
+  }, [editingValue]);
+
   // to make sure input's style is the same as displayed text
   const inputWrapperInheritsStyles = {
     margin: 'inherit',
@@ -172,9 +178,9 @@ export const InlineEdit = ({
         onDoubleClick={onDoubleClick}
         className={clsx(styles.inlineEdit)}
       >
-        {editingValue}
+        {displayValue}
 
-        {!editingValue && (
+        {!displayValue && (
           <Placeholder
             className={placeholderClassName}
             label={placeholder}