Merge pull request #155 from alleslabs/fix/uncontrolled-input

fix: uncontrolled-input err, save and display empty string

CHANGELOG.md

@@ -126,6 +126,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#155](https://github.com/alleslabs/celatone-frontend/pull/155) Fix uncontrolled input error and fix space bar issue in editable cell
 - [#156](https://github.com/alleslabs/celatone-frontend/pull/156) Fix json editor cannot focus by clicking on empty area
 - [#166](https://github.com/alleslabs/celatone-frontend/pull/166) Change default list when editing contract information
 - [#164](https://github.com/alleslabs/celatone-frontend/pull/164) Add observer in code details page

src/lib/components/table/EditableCell.tsx

@@ -12,7 +12,7 @@ interface EditableCellProps {
   onSave?: (value?: string) => void;
 }
 export const EditableCell = ({
-  initialValue,
+  initialValue = "",
   defaultValue,
   maxLength,
   tooltip,
@@ -40,19 +40,22 @@ export const EditableCell = ({
   };
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     const newVal = event.target.value;
-    setInputValue(newVal);
+    setInputValue(newVal.trimStart());
   };
   const handleCancel = () => {
     setIsEdit(false);
     setInputValue(initialValue);
   };
+
   const handleSave = () => {
     setIsEdit(false);
     onSave?.(inputValue);
   };
 
   // TODO: reconsider 20
-  const showName = isHoverText && (inputValue ?? "").length > 20;
+  const showName = isHoverText && inputValue.trim().length > 20;
+  const isShowInputValue = inputValue.trim().length;
+
   return (
     <Flex
       gap={1}
@@ -104,10 +107,10 @@ export const EditableCell = ({
               variant="body2"
               className="ellipsis"
               maxW="150px"
-              fontWeight={inputValue ? "600" : "400"}
-              color={inputValue ? "text.main" : "text.dark"}
+              fontWeight={isShowInputValue ? "600" : "400"}
+              color={isShowInputValue ? "text.main" : "text.dark"}
             >
-              {inputValue ?? defaultValue}
+              {isShowInputValue ? inputValue : defaultValue}
             </Text>
             {showName && (
               <Text