fixed query variables loses focus while typing

Author: raheeliftikhar5

client/packages/lowcoder-design/src/components/keyValueList.tsx

@@ -73,34 +73,52 @@ const AddBtn = styled(TacoButton)`
   }
 `;
 
+const IndicatorWrapper = ({
+  indicatorForAll,
+  children,
+}: {
+  indicatorForAll?: boolean;
+  children: ReactNode,
+}) => {
+  if (indicatorForAll) {
+    return (
+      <BranchDiv $type={"inline"}>
+        {children}
+      </BranchDiv>
+    )
+  }
+  return (<>{children}</>);
+};
+
 export const KeyValueList = (props: {
   list: ReactNode[];
   onAdd: () => void;
   onDelete: (item: ReactNode, index: number) => void;
   isStatic?: boolean;
   indicatorForAll?: boolean;
 }) => {
-  let IndicatorWrapper = ({children}: any) => (<>{children}</>);
-  if(props.indicatorForAll) IndicatorWrapper = BranchDiv;
-  return <>
-    {props.list.map((item, index) => (
-      <IndicatorWrapper $type={"inline"} key={index}>
-        <KeyValueListItem key={index /* FIXME: find a proper key instead of `index` */}>
-          {item}
-          {!props.isStatic &&
-            <DelIcon
-              onClick={() => props.list.length > 1 && props.onDelete(item, index)}
-              $forbidden={props.list.length === 1}
-            />
-          }
-        </KeyValueListItem>
-      </IndicatorWrapper>
-    ))}
-    {!props.isStatic && 
-    <AddBtn onClick={props.onAdd}>
-      <AddIcon />
-      {trans("addItem")}
-    </AddBtn>
-    }
-  </>
+  return (
+    <>
+      {props.list.map((item, index) => (
+        <IndicatorWrapper key={index}>
+          <KeyValueListItem key={index /* FIXME: find a proper key instead of `index` */}>
+            {item}
+            {!props.isStatic &&
+              <DelIcon
+                onClick={() => props.list.length > 1 && props.onDelete(item, index)}
+                $forbidden={props.list.length === 1}
+              />
+            }
+          </KeyValueListItem>
+        </IndicatorWrapper>
+      ))}
+      {!props.isStatic && (
+        <AddBtn onClick={props.onAdd}>
+          <AddIcon />
+          {trans("addItem")}
+        </AddBtn>
+
+      )}
+    </>
+  )
 };

client/packages/lowcoder/src/comps/queries/queryComp.tsx

@@ -664,7 +664,7 @@ export const QueryComp = withExposingConfigs(QueryCompTmp, [
   new NameConfig("runTime", trans("query.runTimeExportDesc")),
   new NameConfig("latestEndTime", trans("query.latestEndTimeExportDesc")),
   new DepsConfig(
-    "variable",
+    "variables",
     (children: any) => {
       return {data: children.variables.children.variables.node()};
     },
@@ -673,8 +673,8 @@ export const QueryComp = withExposingConfigs(QueryCompTmp, [
         return undefined;
       }
       const newNode = Object.values(input.data)
-        .filter((kvNode: any) => kvNode.key.text.value)
-        .map((kvNode: any) => ({[kvNode.key.text.value]: kvNode.value.text.value}))
+        .filter((kvNode: any) => kvNode.key.value)
+        .map((kvNode: any) => ({[kvNode.key.value]: kvNode.value.value}))
         .reduce((prev, obj) => ({...prev, ...obj}), {});
       return newNode;
     },

client/packages/lowcoder/src/comps/queries/queryComp/variablesComp.tsx

@@ -3,10 +3,9 @@ import { keyValueListControl } from "../../controls/keyValueListControl";
 
 export const VariablesComp = new MultiCompBuilder(
   {
-    variables: withDefault(keyValueListControl(), [{ key: "", value: "" }]),
+    variables: withDefault(keyValueListControl(false, [], "string"), [{ key: "", value: "" }]),
   },
-  (props) =>
-    props.variables
+  (props) => props //props.variables
   )
   .setPropertyViewFn((children) => (
     <>