Dev -> Main - v2.7.5

client/VERSION

@@ -1 +1 @@
-2.7.4
+2.7.5

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lowcoder-frontend",
-  "version": "2.7.4",
+  "version": "2.7.5",
   "type": "module",
   "private": true,
   "workspaces": [

client/packages/lowcoder-comps/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lowcoder-comps",
-  "version": "2.7.4",
+  "version": "2.7.5",
   "type": "module",
   "license": "MIT",
   "dependencies": {

client/packages/lowcoder-design/src/components/colorSelect/colorUtils.ts

@@ -75,6 +75,26 @@ const isValidColor = (str?: string) => {
   return colord(str).isValid();
 };
 
+const isTransparentColor = (color?: string) => {
+  if (!color) return true;
+
+  // Check for common transparent values
+  if (color === 'transparent' || color === '') return true;
+
+  // Check if it's a valid color with alpha = 0
+  try {
+    const colorObj = colord(color);
+    if (colorObj.isValid()) {
+      return colorObj.alpha() === 0;
+    }
+  } catch (e) {
+    // If colord can't parse it, consider it transparent
+    return true;
+  }
+
+  return false;
+};
+
 export const isDarkColor = (colorStr: string) => {
   return brightnessCompare(colorStr, 0.75);
 };
@@ -122,4 +142,4 @@ export const darkenColor = (colorStr: string, intensity: number) => {
   return color.darken(intensity).toHex().toUpperCase();
 };
 
-export { toRGBA, toHex, alphaOfRgba, isValidColor, isValidGradient };
+export { toRGBA, toHex, alphaOfRgba, isValidColor, isValidGradient, isTransparentColor };

client/packages/lowcoder-sdk-webpack-bundle/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lowcoder-sdk-webpack-bundle",
   "description": "",
-  "version": "2.7.3",
+  "version": "2.7.5",
   "main": "index.jsx",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

client/packages/lowcoder-sdk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lowcoder-sdk",
-  "version": "2.7.3",
+  "version": "2.7.5",
   "type": "module",
   "files": [
     "src",

client/packages/lowcoder/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lowcoder",
-  "version": "2.7.4",
+  "version": "2.7.5",
   "private": true,
   "type": "module",
   "main": "src/index.sdk.ts",

client/packages/lowcoder/src/api/commonSettingApi.ts

@@ -123,7 +123,7 @@ export function isThemeColorKey(key: string) {
     case "padding":
     case "gridColumns":
     case "textSize":
-      case "lineHeight":
+    case "lineHeight":
       return true;
   }
   return false;

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

@@ -27,7 +27,7 @@ import {
   foldKeymap,
   indentOnInput,
 } from "@codemirror/language";
-import { defaultKeymap, history, historyKeymap, indentWithTab } from "@codemirror/commands";
+import { defaultKeymap, history, historyKeymap, insertTab, indentLess, indentMore } from "@codemirror/commands";
 import { highlightSelectionMatches, searchKeymap } from "@codemirror/search";
 import { Diagnostic, linter, lintKeymap } from "@codemirror/lint";
 import { type EditorState, Prec } from "@codemirror/state";
@@ -282,7 +282,20 @@ export function useFocusExtension(onFocus?: (focused: boolean) => void): [Extens
 }
 
 function indentWithTabExtension(open?: boolean) {
-  return open ?? true ? keymap.of([indentWithTab]) : [];
+  if (!(open ?? true)) return [];
+  return keymap.of([
+    {
+      key: "Tab",
+      run: (view: EditorView) => {
+        const { main } = view.state.selection;
+        if (!main.empty && main.from !== main.to) {
+          return indentMore(view);
+        }
+        return insertTab(view);
+      },
+    },
+    { key: "Shift-Tab", run: indentLess },
+  ]);
 }
 
 export function lineNoExtension(showLineNumber?: boolean) {
@@ -493,26 +506,26 @@ export function useExtensions(props: CodeEditorProps) {
       basicSetup,
       defaultTheme,
       highlightJsExt,
-      autocompletionExtension,
       focusExtension,
       lineNoExt,
       languageExt,
       onChangeExt,
       placeholderExt,
       indentWithTabExt,
+      autocompletionExtension,
       tooltipExt,
       lintExt,
       iconExt,
     ],
     [
       highlightJsExt,
-      autocompletionExtension,
       focusExtension,
       lineNoExt,
       languageExt,
       onChangeExt,
       placeholderExt,
       indentWithTabExt,
+      autocompletionExtension,
       tooltipExt,
       lintExt,
       iconExt,

client/packages/lowcoder/src/components/table/EditableCell.tsx

@@ -225,6 +225,7 @@ function EditableCellComp<T extends JSONValue>(props: EditableCellProps<T>) {
           key={`normal-view-${cellIndex}`}
           tabIndex={editable ? 0 : -1 }
           onFocus={enterEditFn}
+          style={{ width: '100%', height: '100%'}}
         >
           {normalView}
         </div>

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

@@ -1,4 +1,4 @@
-import { ReactNode, useEffect, useState, useCallback } from "react";
+import { ReactNode, useEffect, useState, useCallback, useRef } from "react";
 import { Input, Section, sectionNames } from "lowcoder-design";
 import { BoolControl } from "comps/controls/boolControl";
 import { styleControl } from "comps/controls/styleControl";
@@ -148,12 +148,19 @@ let AutoCompleteCompBase = (function () {
     const [activationFlag, setActivationFlag] = useState(false);
     const [searchtext, setsearchtext] = useState<string>(props.value.value);
     const [validateState, setvalidateState] = useState({});
+
+    // Use simple refs like text input components
+    const changeRef = useRef(false);
+    const touchRef = useRef(false);
 
     //   是否中文环境
     const [chineseEnv, setChineseEnv] = useState(getDayJSLocale() === "zh-cn");
 
     useEffect(() => {
-      setsearchtext(props.value.value);
+      // Only update local state from props if user hasn't touched the input
+      if (!touchRef.current) {
+        setsearchtext(props.value.value);
+      }
       activationFlag &&
         setvalidateState(textInputValidate(getTextInputValidate()));
     }, [
@@ -247,19 +254,27 @@ let AutoCompleteCompBase = (function () {
       props.valueInItems.onChange(false);
       setvalidateState(textInputValidate(getTextInputValidate()));
       setsearchtext(value);
+      changeRef.current = true;
+      touchRef.current = true;
+
+      // Update parent value immediately to prevent sync issues
       props.value.onChange(value);
       props.onEvent("change");
+
       if(!Boolean(value)) {
         props.selectedOption.onChange({});
       }
     }, [props.valueInItems, getTextInputValidate, props.value, props.onEvent, props.selectedOption]);
 
     const handleSelect = useCallback((data: string, option: any) => {
-      setsearchtext(option[valueOrLabel]);
+      const selectedValue = option[valueOrLabel];
+      setsearchtext(selectedValue);
       props.valueInItems.onChange(true);
-      props.value.onChange(option[valueOrLabel]);
+      props.value.onChange(selectedValue);
       props.selectedOption.onChange(option);
       props.onEvent("submit");
+      changeRef.current = true;
+      touchRef.current = true;
     }, [valueOrLabel, props.valueInItems, props.value, props.onEvent, props.selectedOption]);
 
     const handleFocus = useCallback(() => {
@@ -268,6 +283,7 @@ let AutoCompleteCompBase = (function () {
     }, [props.onEvent]);
 
     const handleBlur = useCallback(() => {
+      touchRef.current = false;
       props.onEvent("blur");
     }, [props.onEvent]);