#115-make combobox editable inline

src/common/components/front-components/combobox-shape.tsx

@@ -17,7 +17,7 @@ export const getComboBoxShapeSizeRestrictions = (): ShapeSizeRestrictions =>
   comboBoxShapeRestrictions;
 
 export const ComboBoxShape = forwardRef<any, ShapeProps>(
-  ({ x, y, width, height, id, onSelected, ...shapeProps }, ref) => {
+  ({ x, y, width, height, id, onSelected, text, ...shapeProps }, ref) => {
     const { width: restrictedWidth, height: restrictedHeight } =
       fitSizeToShapeSizeRestrictions(comboBoxShapeRestrictions, width, height);
 
@@ -53,7 +53,7 @@ export const ComboBoxShape = forwardRef<any, ShapeProps>(
         <Text
           x={10}
           y={(height - 25) / 2 + 5}
-          text="Select an option"
+          text={text}
           fontSize={20}
           fontFamily="Arial"
           fill="black"

src/pods/canvas/canvas.model.ts

@@ -97,6 +97,7 @@ const doesShapeAllowInlineEdition = (shapeType: ShapeType): boolean => {
   switch (shapeType) {
     case 'input':
     case 'label':
+    case 'combobox':
     case 'button':
       return true;
     default:
@@ -110,6 +111,8 @@ const generateDefaultTextValue = (shapeType: ShapeType): string | undefined => {
       return '';
     case 'label':
       return 'Label';
+    case 'combobox':
+      return 'Select an option';
     case 'button':
       return 'Click Me!';
     default:

src/pods/canvas/shape-renderer/simple-component/combobox.renderer.tsx

@@ -24,6 +24,8 @@ export const renderComboBox = (
       onDragEnd={handleDragEnd(shape.id)}
       onTransform={handleTransform}
       onTransformEnd={handleTransform}
+      isEditable={shape.allowsInlineEdition}
+      text={shape.text}
     />
   );
 };