Fix query trigger on pageload

client/packages/lowcoder/package.json

@@ -92,7 +92,7 @@
     "resize-observer-polyfill": "^1.5.1",
     "simplebar-react": "^3.2.4",
     "sql-formatter": "^8.2.0",
-    "styled-components": "^6.1.6",
+    "styled-components": "^6.1.8",
     "stylis": "^4.1.1",
     "tern": "^0.24.3",
     "typescript-collections": "^1.3.3",

client/packages/lowcoder/src/base/codeEditor/codeEditor.tsx

@@ -51,8 +51,10 @@ const textStyle = css`
 export const CodeEditorTooltipContainer = styled.div`
   // tooltip common
   .cm-tooltip {
-    z-index: ${Layers.codeEditorTooltip};
     border: 1px solid #d7d9e0;
+    padding: 5px !important;
+    margin-top: 5px !important;
+    height: 120px;
   }
   // make sure antd popover in the code editor available
   .ant-popover {

client/packages/lowcoder/src/comps/comps/iconComp.tsx

@@ -80,20 +80,24 @@ const IconView = (props: RecordConstructorToView<typeof childrenMap>) => {
   };
 
   return (
-    <ReactResizeDetector onResize={onResize}>
-      <Container
-        ref={conRef}
-        $style={props.style}
-        style={{
-          fontSize: props.autoHeight
-            ? `${height < width ? height : width}px`
-            : props.iconSize,
-          background: props.style.background,
-        }}
-        onClick={() => props.onEvent("click")}
-      >
-        {props.icon}  
-      </Container>
+    <ReactResizeDetector
+      onResize={onResize}
+      render={() => (
+        <Container
+          ref={conRef}
+          $style={props.style}
+          style={{
+            fontSize: props.autoHeight
+              ? `${height < width ? height : width}px`
+              : props.iconSize,
+            background: props.style.background,
+          }}
+          onClick={() => props.onEvent("click")}
+        >
+          {props.icon}  
+        </Container>
+      )}
+    >
     </ReactResizeDetector>
   );
 };

client/packages/lowcoder/src/comps/comps/imageComp.tsx

@@ -132,24 +132,28 @@ const ContainerImg = (props: RecordConstructorToView<typeof childrenMap>) => {
     }
   };
   return (
-    <ReactResizeDetector onResize={onResize}>
-      <Container ref={conRef} $style={props.style}>
-        <div
-          ref={imgRef}
-          style={
-            props.autoHeight ? { width: "100%", height: "100%" } : undefined
-          }
-        >
-          <AntImage
-            src={props.src.value}
-            referrerPolicy="same-origin"
-            draggable={false}
-            preview={props.supportPreview}
-            fallback={DEFAULT_IMG_URL}
-            onClick={() => props.onEvent("click")}
-          />
-        </div>
-      </Container>
+    <ReactResizeDetector
+      onResize={onResize}
+      render={() => (
+        <Container ref={conRef} $style={props.style}>
+          <div
+            ref={imgRef}
+            style={
+              props.autoHeight ? { width: "100%", height: "100%" } : undefined
+            }
+          >
+            <AntImage
+              src={props.src.value}
+              referrerPolicy="same-origin"
+              draggable={false}
+              preview={props.supportPreview}
+              fallback={DEFAULT_IMG_URL}
+              onClick={() => props.onEvent("click")}
+            />
+          </div>
+        </Container>
+      )}
+    >
     </ReactResizeDetector>
   );
 };

client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx

@@ -278,15 +278,22 @@ export function ListView(props: Props) {
 
         <BodyWrapper ref={ref} $autoHeight={autoHeight}>
           <ScrollBar style={{ height: autoHeight ? "auto" : "100%", margin: "0px", padding: "0px" }} hideScrollbar={!scrollbars}>
-            <>{<ReactResizeDetector onResize={(width?: number, height?: number) => { if (height) setListHeight(height); }} observerOptions={{ box: "border-box" }} >
-              <ListOrientationWrapper
-                $isHorizontal={horizontal}
-                $isGrid={noOfColumns > 1}
-                $autoHeight={autoHeight}
-              >
-                {renders}
-              </ListOrientationWrapper>
-            </ReactResizeDetector>}</>
+            <ReactResizeDetector
+              onResize={(width?: number, height?: number) => {
+                if (height) setListHeight(height);
+              }}
+              observerOptions={{ box: "border-box" }}
+              render={() => (
+                <ListOrientationWrapper
+                  $isHorizontal={horizontal}
+                  $isGrid={noOfColumns > 1}
+                  $autoHeight={autoHeight}
+                >
+                  {renders}
+                </ListOrientationWrapper>
+              )}
+            >
+            </ReactResizeDetector>
           </ScrollBar>
         </BodyWrapper>
         <FooterWrapper>

client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx

@@ -228,54 +228,59 @@ let ButtonTmpComp = (function () {
     return (
       <EditorContext.Consumer>
         {(editorState) => (
-          <ReactResizeDetector onResize={onResize}>
-            <Container ref={conRef} $style={props.style}>
-              <div
-                ref={imgRef}
-                style={
-                  props.autoHeight
-                    ? { width: "100%", height: "100%" }
-                    : undefined
-                }
-              >
-                <Button100
-                  ref={props.viewRef}
-                  $buttonStyle={props.style}
-                  loading={props.loading}
+          <ReactResizeDetector
+            onResize={onResize}
+            render={() => (
+              <Container ref={conRef} $style={props.style}>
+                <div
+                  ref={imgRef}
                   style={
                     props.autoHeight
-                      ? {
-                          width: "100%",
+                      ? { width: "100%", height: "100%" }
+                      : undefined
+                  }
+                >
+                  <Button100
+                    ref={props.viewRef}
+                    $buttonStyle={props.style}
+                    loading={props.loading}
+                    style={
+                      props.autoHeight
+                        ? { 
+                          width: "100%", 
                           height: "100%",
                           aspectRatio: props.aspectRatio,
                           borderRadius: props.style.radius,
                         }
-                      : {
+                        : {
                           aspectRatio: props.aspectRatio,
                           borderRadius: props.style.radius,
                         }
-                  }
-                  disabled={
-                    props.disabled ||
-                    (!isDefault(props.type) &&
-                      getForm(editorState, props.form)?.disableSubmit())
-                  }
-                  onClick={() =>
-                    isDefault(props.type)
-                      ? props.onEvent("click")
-                      : submitForm(editorState, props.form)
-                  }
-                >
-                  {props.prefixIcon && (
-                    <IconWrapper
-                      $style={{ ...props.style, size: props.iconSize }}
-                    >
-                      {props.prefixIcon}
-                    </IconWrapper>
-                  )}
-                </Button100>
-              </div>
-            </Container>
+                    }
+                    disabled={
+                      props.disabled ||
+                      (!isDefault(props.type) &&
+                        getForm(editorState, props.form)?.disableSubmit())
+                    }
+                    onClick={() =>
+                      isDefault(props.type)
+                        ? props.onEvent("click")
+                        : submitForm(editorState, props.form)
+                    }
+                  >
+                    {props.prefixIcon && (
+                      <IconWrapper
+                        $style={{ ...props.style, size: props.iconSize }}
+                      >
+                        {props.prefixIcon}
+                      </IconWrapper>
+                    )}
+
+                  </Button100>
+                </div>
+              </Container>
+            )}
+          >
           </ReactResizeDetector>
         )}
       </EditorContext.Consumer>

client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx

@@ -101,45 +101,49 @@ const TreeCompView = (props: RecordConstructorToView<typeof childrenMap>) => {
     labelStyle,
     inputFieldStyle:props.inputFieldStyle,
     children: (
-      <ReactResizeDetector onResize={(w, h) => setHeight(h)}>
-        <Container {...props.inputFieldStyle}>
-          <Tree
-            key={selectType}
-            disabled={props.disabled}
-            height={height}
-            rootStyle={{ background: "transparent", color: props.inputFieldStyle.text }}
-            fieldNames={{ title: "label", key: "value" }}
-            treeData={treeData}
-            selectable={selectable}
-            multiple={selectType === "multi"}
-            selectedKeys={selectable ? value.value : []}
-            checkable={checkable}
-            checkedKeys={
-              checkable
-                ? checkStrictly
-                  ? { checked: value.value, halfChecked: [] }
-                  : value.value
-                : undefined
-            }
-            checkStrictly={checkStrictly}
-            showLine={props.showLine ? { showLeafIcon: props.showLeafIcon } : false}
-            expandedKeys={expanded.value}
-            autoExpandParent={props.autoExpandParent}
-            onSelect={(keys) => {
-              value.onChange(keys as (string | number)[]);
-              props.onEvent("change");
-            }}
-            onCheck={(keys) => {
-              value.onChange(Array.isArray(keys) ? keys as (string | number)[] : keys.checked as (string | number)[]);
-              props.onEvent("change");
-            }}
-            onExpand={(keys) => {
-              expanded.onChange(keys as (string | number)[]);
-            }}
-            onFocus={() => props.onEvent("focus")}
-            onBlur={() => props.onEvent("blur")}
-          />
+      <ReactResizeDetector
+        onResize={(w, h) => setHeight(h)}
+        render={() => (
+          <Container {...props.inputFieldStyle}>
+            <Tree
+              key={selectType}
+              disabled={props.disabled}
+              height={height}
+              rootStyle={{ background: "transparent", color: props.inputFieldStyle.text }}
+              fieldNames={{ title: "label", key: "value" }}
+              treeData={treeData}
+              selectable={selectable}
+              multiple={selectType === "multi"}
+              selectedKeys={selectable ? value.value : []}
+              checkable={checkable}
+              checkedKeys={
+                checkable
+                  ? checkStrictly
+                    ? { checked: value.value, halfChecked: [] }
+                    : value.value
+                  : undefined
+              }
+              checkStrictly={checkStrictly}
+              showLine={props.showLine ? { showLeafIcon: props.showLeafIcon } : false}
+              expandedKeys={expanded.value}
+              autoExpandParent={props.autoExpandParent}
+              onSelect={(keys) => {
+                value.onChange(keys as (string | number)[]);
+                props.onEvent("change");
+              }}
+              onCheck={(keys) => {
+                value.onChange(Array.isArray(keys) ? keys as (string | number)[] : keys.checked as (string | number)[]);
+                props.onEvent("change");
+              }}
+              onExpand={(keys) => {
+                expanded.onChange(keys as (string | number)[]);
+              }}
+              onFocus={() => props.onEvent("focus")}
+              onBlur={() => props.onEvent("blur")}
+            />
         </Container>
+        )}
+      >
       </ReactResizeDetector>
     ),
   });

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

@@ -8,7 +8,7 @@ import DataSourceIcon from "components/DataSourceIcon";
 import { SimpleNameComp } from "comps/comps/simpleNameComp";
 import { StringControl } from "comps/controls/codeControl";
 import { eventHandlerControl } from "comps/controls/eventHandlerControl";
-import { EditorContext, EditorState } from "comps/editorState";
+import { EditorState } from "comps/editorState";
 import {
   stateComp,
   valueComp,
@@ -43,7 +43,7 @@ import {
   wrapActionExtraInfo,
 } from "lowcoder-core";
 import { ValueFromOption } from "lowcoder-design";
-import { ReactNode, useContext, useEffect } from "react";
+import { ReactNode, useEffect } from "react";
 import {
   BottomResComp,
   BottomResCompResult,
@@ -271,12 +271,10 @@ interface QueryViewProps {
 }
 
 function QueryView(props: QueryViewProps) {
-  const editorState = useContext(EditorContext);
   const { comp } = props;
 
   useEffect(() => {
     // Automatically load when page load
-
     if (
       getTriggerType(comp) === "automatic" &&
       (comp as any).isDepReady &&

client/packages/lowcoder/src/pages/editor/bottom/BottomContent.tsx

@@ -143,7 +143,13 @@ export const BottomContent = () => {
       </Left>
       <Drag />
       <Right>
-        <div style={{ width: "100%", height: "100%", minWidth: "480px" }}>
+        <div style={{
+          width: "100%",
+          height: "100%",
+          minWidth: "480px",
+          display: "flex",
+          flexDirection: "column",
+        }}>
           <MetaDataContext.Provider value={metaData}>
             <CompNameContext.Provider
               value={editorState.selectedQueryComp()?.children.name.getView() || ""}

client/yarn.lock

@@ -13722,7 +13722,7 @@ __metadata:
     rollup-plugin-visualizer: ^5.9.2
     simplebar-react: ^3.2.4
     sql-formatter: ^8.2.0
-    styled-components: ^6.1.6
+    styled-components: ^6.1.8
     stylis: ^4.1.1
     tern: ^0.24.3
     typescript: ^4.8.4
@@ -19066,7 +19066,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"styled-components@npm:^6.1.6":
+"styled-components@npm:^6.1.8":
   version: 6.1.8
   resolution: "styled-components@npm:6.1.8"
   dependencies: