diff --git a/packages/ui-vue/components/button-edit/src/button-edit.props.ts b/packages/ui-vue/components/button-edit/src/button-edit.props.ts
index 5912635d12c2c399500df26d06d9cb217db19ffe..34cbd2b53de18de675dc0e990b0f890dd4c10f74 100644
--- a/packages/ui-vue/components/button-edit/src/button-edit.props.ts
+++ b/packages/ui-vue/components/button-edit/src/button-edit.props.ts
@@ -147,7 +147,9 @@ export const buttonEditProps = {
      */
     beforeOpen: { type: Function as PropType<BeforeOpenFunction>, default: null },
     /** 更新方式 blur | change */
-    updateOn: { type: String, default: 'change' }
+    updateOn: { type: String, default: 'change' },
+    keepWidthWithReference: { type: Boolean, default: true },
+    placement:{ type: String, default: 'bottom-left' }
 
 } as Record<string, any>;
 
diff --git a/packages/ui-vue/components/button-edit/src/components/popup-container.component.tsx b/packages/ui-vue/components/button-edit/src/components/popup-container.component.tsx
index 67b2d1a0bfa7e27fb225d61c70f40201de2b6f84..526567435a7b87f8731dced8ce9110dc6413af1d 100644
--- a/packages/ui-vue/components/button-edit/src/components/popup-container.component.tsx
+++ b/packages/ui-vue/components/button-edit/src/components/popup-container.component.tsx
@@ -12,8 +12,8 @@ export default function (
     const { hidePopup, popoverRef } = popupComposition;
 
     return () => {
-        return <FPopover id={`${props.id}-popover`} ref={popoverRef} visible={true} placement="bottom-left"
-            host={props.popupHost} keep-width-with-reference={true} fitContent={true}
+        return <FPopover id={`${props.id}-popover`} ref={popoverRef} visible={true} placement={props.placement}
+            host={props.popupHost} keep-width-with-reference={props.keepWidthWithReference} fitContent={true}
             right-boundary={props.popupRightBoundary} minWidth={popupMinWidth.value}
             offsetX={props.popupOffsetX}
             onHidden={hidePopup}>
diff --git a/packages/ui-vue/components/button-edit/src/composition/use-button.ts b/packages/ui-vue/components/button-edit/src/composition/use-button.ts
index 28417bb8e17d6451716237951c022c14f426cd1a..9bed244a3cf91e4ac55d8710d80a1603d1c61612 100644
--- a/packages/ui-vue/components/button-edit/src/composition/use-button.ts
+++ b/packages/ui-vue/components/button-edit/src/composition/use-button.ts
@@ -70,6 +70,7 @@ export function useButton(
                 });
             }
             if (hasContent && buttonBehavior.value === 'Popup') {
+                $event.stopPropagation();
                 usePopupComposition.togglePopup(true);
             }
             if (hasContent && shouldPopupOnInput.value) {
diff --git a/packages/ui-vue/components/combo-list/src/combo-list.component.tsx b/packages/ui-vue/components/combo-list/src/combo-list.component.tsx
index 813de74ae35749aa380a63bbc7886a5fc30c4b7a..0102c7a2165c065b50044a8aabbfa4b401e34197 100644
--- a/packages/ui-vue/components/combo-list/src/combo-list.component.tsx
+++ b/packages/ui-vue/components/combo-list/src/combo-list.component.tsx
@@ -86,7 +86,14 @@ export default defineComponent({
             context.emit('input', eventData);
         }
 
-        context.expose({ getDisplayText });
+        function hidePopup() {
+            comboEditorRef.value.hidePopup();
+        }
+
+        context.expose({ 
+            getDisplayText,
+            hidePopup
+         });
 
         watch(
             [() => props.disabled, () => props.editable, () => props.enableClear, () => props.enableSearch, () => props.readonly],
@@ -124,6 +131,7 @@ export default defineComponent({
                     onChange={onDisplayTextChange}
                     onInput={onInput}
                     beforeOpen={props.beforeOpen}
+                    placement={'auto'}
                 >
                     <ComboListContainer
                         idField={props.idField}
diff --git a/packages/ui-vue/components/combo-tree/src/combo-tree.component.tsx b/packages/ui-vue/components/combo-tree/src/combo-tree.component.tsx
index 3aaf642af7af9fe8b8cb26bc1ebf4a04c703ee5e..d2e5233da007392c7709265177420cdd12a65f2f 100644
--- a/packages/ui-vue/components/combo-tree/src/combo-tree.component.tsx
+++ b/packages/ui-vue/components/combo-tree/src/combo-tree.component.tsx
@@ -80,7 +80,8 @@ export default defineComponent({
                     onClear={onClear}
                     onChange={onDisplayTextChange}
                     focusOnCreated={props.focusOnCreated}
-                    selectOnCreated={props.selectOnCreated}>
+                    selectOnCreated={props.selectOnCreated}
+                    placement={'auto'}>
                     <ComboTreeContainer
                         maxHeight={props.maxHeight}
                         idField={props.idField}
diff --git a/packages/ui-vue/components/date-picker/src/components/date-picker-container/date-picker-container.component.tsx b/packages/ui-vue/components/date-picker/src/components/date-picker-container/date-picker-container.component.tsx
index 9fa69ef2f27d4e22465e25e39b9ed81b0e807eaa..01d68106e632037b53d1d26e161aa0e3a4849e56 100644
--- a/packages/ui-vue/components/date-picker/src/components/date-picker-container/date-picker-container.component.tsx
+++ b/packages/ui-vue/components/date-picker/src/components/date-picker-container/date-picker-container.component.tsx
@@ -232,7 +232,8 @@ export default defineComponent({
                 'top': `${top.value}px`,
                 'left': `${left.value}px`,
                 'width': getWidth(),
-                'position': displayMode.value === 'Embedded' ? 'relative' : 'absolute',
+                // 'position': displayMode.value === 'Embedded' ? 'relative' : 'absolute',
+                'position': 'relative',
                 'z-index': displayMode.value === 'Embedded' ? 0 : 9999,
                 'margin-top': '0px'
             } as Record<string, any>;
diff --git a/packages/ui-vue/components/date-picker/src/date-picker.component.tsx b/packages/ui-vue/components/date-picker/src/date-picker.component.tsx
index 6d5301f7ffb8baefcd7f7ffdf706a97a38c66aef..604926c34d299b297d6b12d380281adae601f2c1 100644
--- a/packages/ui-vue/components/date-picker/src/date-picker.component.tsx
+++ b/packages/ui-vue/components/date-picker/src/date-picker.component.tsx
@@ -60,6 +60,11 @@ export default defineComponent({
         /** 禁用至该范围 */
         const disableUntil = ref([props.disableUntil]);
 
+        const disable = ref(props.disabled);
+        const readonly = ref(props.readonly);
+        const enableClear = ref(props.enableClear);
+        const editable = ref(props.editable);
+
         const { formatTo } = useDateFormat();
 
         function onClickButton() { }
@@ -78,7 +83,7 @@ export default defineComponent({
         }
 
         function closeCalendarPanel() {
-            document.body.click();
+            buttonEdit.value.hidePopup();
         }
 
         function onDatePicked(dateValue: DateObject) {
@@ -103,6 +108,16 @@ export default defineComponent({
             }
         });
 
+        watch(
+            [() => props.disabled, () => props.editable, () => props.enableClear, () => props.readonly],
+            ([newDisabled, newEditable, newEnableClear,  newReadonly]) => {
+                disable.value = newDisabled;
+                editable.value = newEditable;
+                enableClear.value = newEnableClear;
+                readonly.value = newReadonly;
+            }
+        );
+
         onMounted(() => {
             if (modelValue.value) {
                 setModelValue(modelValue.value);
@@ -123,13 +138,16 @@ export default defineComponent({
                     ref={buttonEdit}
                     modelValue={displayDate.value}
                     buttonContent={groupIcon}
-                    disable={props.readonly||props.disabled}
-                    placeholder={props.placeholder}
-                    enableClear
+                    disable={disable.value}
+                    readonly={readonly.value}
+                    editable={editable.value}
+                    enableClear={enableClear.value}
                     onClear={onClearDate}
                     onClickButton={onClickButton}
                     focusOnCreated={props.focusOnCreated}
-                    selectOnCreated={props.selectOnCreated}>
+                    selectOnCreated={props.selectOnCreated}
+                    keepWidthWithReference={false}
+                    placement={'auto'}>
 
                     {{
                         default: () =>
diff --git a/packages/ui-vue/components/lookup/src/components/lookup-container.component.tsx b/packages/ui-vue/components/lookup/src/components/lookup-container.component.tsx
index d49f81944e103e53d7b01cdcefa41ff8cb3ad968..ce47d8db91ee7bc7da6fe7dbcfd58d6b44412dd6 100644
--- a/packages/ui-vue/components/lookup/src/components/lookup-container.component.tsx
+++ b/packages/ui-vue/components/lookup/src/components/lookup-container.component.tsx
@@ -43,19 +43,14 @@ export default defineComponent({
 
         function getIdValues() {
             try {
-                if (props.context && props.context.rowData) {
-                    const { rowData } = props.context;
-                    if (props.mappingFields && rowData) {
-                        const targetField = props.mappingFields[props.idField];
-                        if (targetField !== undefined) {
-                            const value = rowData[targetField];
-                            return value;
-                        }
-                    }
-                    return '';
+                const idvalues = useHttpComposition.idValues.value;
+
+                if (idvalues !== '' && idvalues != null) {
+                    return idvalues;
                 }
 
-                return useHttpComposition?.idValues.value;
+                return '';
+
             } catch (error) {
                 console.error('Error in getIdValues:', error);
                 return '';
diff --git a/packages/ui-vue/components/lookup/src/components/search-bar/search-bar.component.tsx b/packages/ui-vue/components/lookup/src/components/search-bar/search-bar.component.tsx
index 6e277751ec7d4cc9519e3d596a11fd1e04fc266b..5b4b1000c7f3b8c9abdac210c70d935bd8b42e21 100644
--- a/packages/ui-vue/components/lookup/src/components/search-bar/search-bar.component.tsx
+++ b/packages/ui-vue/components/lookup/src/components/search-bar/search-bar.component.tsx
@@ -15,6 +15,7 @@ export default defineComponent({
         const searchField = ref('');
         const searchValue = ref(queryState.value);
         const isNavigation = ref(props.isNavigation);
+        const searchFieldRef = ref<any>();
 
         const eventParams = computed(() => {
             return {
@@ -66,6 +67,10 @@ export default defineComponent({
             }
         }
 
+        function onInputClick() {
+            searchFieldRef.value.hidePopup();
+        }
+
         onMounted(() => {
             setDefaultSearchField();
             if (isNavigation.value) {
@@ -77,6 +82,7 @@ export default defineComponent({
             return <div class="fv-lookup-search-bar d-flex flex-row">
                 <div style="width: 160px;">
                     <FComboList
+                        ref={searchFieldRef}
                         data={searchFields.value}
                         textField={'label'}
                         valueField={'value'}
@@ -92,6 +98,7 @@ export default defineComponent({
                         enableClear={true}
                         onClear={onClearSearchValue}
                         onKeyup={onEnterHandler}
+                        onClick={onInputClick}
                     ></FButtonEdit>
                 </div>
             </div>;
diff --git a/packages/ui-vue/components/lookup/src/composition/use-dialog.ts b/packages/ui-vue/components/lookup/src/composition/use-dialog.ts
index e0dde1ab53b5f93525dfbfa02162ad3f61d29422..f88750e18fe63333bb3ae211f1d2f9692106e41d 100644
--- a/packages/ui-vue/components/lookup/src/composition/use-dialog.ts
+++ b/packages/ui-vue/components/lookup/src/composition/use-dialog.ts
@@ -13,7 +13,7 @@ enum CloseType {
 
 export function useDialog(
     props: LookupProps, context: SetupContext, selectedItems: Ref<any[]>, {
-        dictPicked, modelValue, buttonEditInstance, userDataService }: any) {
+        dictPicked, modelValue, buttonEditInstance, userDataService, idValue }: any) {
     const notifyService: FNotifyService | null = inject(F_NOTIFY_SERVICE_TOKEN, null);
     const loadingService: any | null = inject('FLoadingService');
 
@@ -37,6 +37,7 @@ export function useDialog(
         }).join(props.separator);
 
         modelValue.value = displayText;
+        idValue.value = idValues;
 
         context.emit('update:modelValue', displayText);
         context.emit('update:idValue', idValues);
diff --git a/packages/ui-vue/components/lookup/src/composition/use-http.ts b/packages/ui-vue/components/lookup/src/composition/use-http.ts
index d71cd841c57b09187909b882dfd0bad161e05889..8e29f4516354c27021d2c2d32f1600a5e1b35398 100644
--- a/packages/ui-vue/components/lookup/src/composition/use-http.ts
+++ b/packages/ui-vue/components/lookup/src/composition/use-http.ts
@@ -27,7 +27,7 @@ export function useHttp(props: any, context: any): UseHttpComposition {
     const idValues = ref(props.idValue);
     function buildConditionsWhenSearchAnyFields(searchFields: any[], searchValues: string, isNavSearch = false): any[] {
         // 处理空值或只包含空格的情况
-        if (!searchValues.trim()) {
+        if (searchValues == null || !searchValues.trim()) {
             return [];
         }
 
diff --git a/packages/ui-vue/components/lookup/src/composition/use-navigation.tsx b/packages/ui-vue/components/lookup/src/composition/use-navigation.tsx
index e78474c484dd762dbe8050350d1169d44c0201bd..a9fdde84d541fe2aceda5d0dd8472cb0b4738594 100644
--- a/packages/ui-vue/components/lookup/src/composition/use-navigation.tsx
+++ b/packages/ui-vue/components/lookup/src/composition/use-navigation.tsx
@@ -1,6 +1,6 @@
 import { inject, ref, watch } from "vue";
-import {FTreeGrid} from '../../../tree-grid';
-import {FDataGrid} from "../../../data-grid";
+import {FTreeGrid} from '@farris/ui-vue/components/tree-grid';
+import {FDataGrid} from "@farris/ui-vue/components/data-grid";
 import {LookupProps } from "../lookup.props";
 import { useCheckProps } from "./use-check-props";
 import { useSearchbar } from "./use-search-bar";
@@ -8,6 +8,8 @@ import { usePageInfo } from "./use-pageinfo";
 import { LOOKUP_HTTP_COMPOSITION, UseHttpComposition } from "./use-http";
 import { navigationState, pageInfoState, searchState } from "./use-state";
 
+import { treeGridRowOption } from "./use-treegrid-row-options";
+
 export function useNavigation(props: LookupProps, context) {
     const useHttpComposition: UseHttpComposition = inject(LOOKUP_HTTP_COMPOSITION) as UseHttpComposition;
 
@@ -125,6 +127,7 @@ export function useNavigation(props: LookupProps, context) {
             selection={selectionOptions}
             virtualized={true}
             showBorder={ true }
+            rowOption={treeGridRowOption}
             onSelectionChange={onTreegridSelectionChange}></FTreeGrid>;
     }
 
diff --git a/packages/ui-vue/components/lookup/src/composition/use-treegrid-row-options.ts b/packages/ui-vue/components/lookup/src/composition/use-treegrid-row-options.ts
new file mode 100644
index 0000000000000000000000000000000000000000..82a2cb4e1d5d98af0c39178f51b2bbd94d176561
--- /dev/null
+++ b/packages/ui-vue/components/lookup/src/composition/use-treegrid-row-options.ts
@@ -0,0 +1,8 @@
+import { RowOptions, VisualData } from "@farris/ui-vue/components/data-view";
+
+export const treeGridRowOption: Partial<RowOptions> = {
+    customRowStatus: (visualData: VisualData) => {
+        visualData.collapse = !visualData.raw.expanded;
+        return visualData;
+    }
+};
diff --git a/packages/ui-vue/components/lookup/src/composition/use-treegrid.tsx b/packages/ui-vue/components/lookup/src/composition/use-treegrid.tsx
index 73691c9a9a06b1cec8dd8ffcc73d72f41b7110f3..e5a6923a7778a77cc8bc2289d00f580dd9225961 100644
--- a/packages/ui-vue/components/lookup/src/composition/use-treegrid.tsx
+++ b/packages/ui-vue/components/lookup/src/composition/use-treegrid.tsx
@@ -1,10 +1,12 @@
 import { inject, ref, SetupContext, watch } from "vue";
 import { LookupProps } from "../lookup.props";
-import { FTreeGrid } from '../../../tree-grid';
+import { FTreeGrid } from '@farris/ui-vue/components/tree-grid';
 import { useCheckProps } from "./use-check-props";
 import { lookupState, searchState, selectionState } from "./use-state";
 import { LookupHttpResult } from "./types";
 import { LOOKUP_HTTP_COMPOSITION, useHttp, UseHttpComposition } from "./use-http";
+import { treeGridRowOption } from "./use-treegrid-row-options";
+
 
 export function useTreegrid(props: LookupProps, context: SetupContext) {
     const useHttpComposition = inject(LOOKUP_HTTP_COMPOSITION) as UseHttpComposition;
@@ -21,8 +23,7 @@ export function useTreegrid(props: LookupProps, context: SetupContext) {
 
     function dataGridLoadData(items: any) {
         treegridRef.value?.updateDataSource(items || []);
-        // 树组件暂未支持此特性
-        // treegridRef.value?.selectItemByIds(idValues.value.split(props.separator));
+        treegridRef.value?.selectItemByIds(idValues.value.split(props.separator));
     }
 
     function setDatagridColumns(columns: any[]) {
@@ -78,6 +79,7 @@ export function useTreegrid(props: LookupProps, context: SetupContext) {
             showBorder={true}
             virtualized={true}
             displayField={'code'}
+            rowOption={treeGridRowOption}
             onSelectionChange={onSelectionChange}></FTreeGrid>;
     };
 
diff --git a/packages/ui-vue/components/lookup/src/lookup.component.tsx b/packages/ui-vue/components/lookup/src/lookup.component.tsx
index e48a685cc9b30634fbbcd71d6591e5bd95b1c106..47774d2a91579c467765f449818ca2a82ceed5de 100644
--- a/packages/ui-vue/components/lookup/src/lookup.component.tsx
+++ b/packages/ui-vue/components/lookup/src/lookup.component.tsx
@@ -50,7 +50,11 @@ export default defineComponent({
 
         const {dictPicked} = useLookupCallBack(props);
         const { modalOptions, beforeOpenDialog, dialogSize, customData: customQueryData, updateModelValue } =
-            useDialog(props, context as any, selectionState, {dictPicked, modelValue, buttonEditInstance: elementRef, userDataService});
+            useDialog(props, context as any, selectionState, {
+                dictPicked, modelValue, 
+                buttonEditInstance: elementRef, userDataService,
+                idValue: useHttpComposition.idValues
+            });
 
         const { onInputBlur, onEnterKeyDown } = useInputChange(props, context,
             { beforeOpenDialog, updateModelValue, selectedItems: selectionState, openDialog, modelValue, useHttpComposition });
diff --git a/packages/ui-vue/components/lookup/src/property-config/lookup.property-config.ts b/packages/ui-vue/components/lookup/src/property-config/lookup.property-config.ts
index 9cccf66c9156b2f8ec1b4269d311f1068edd26e3..9bccfe86e0b9198ad3d91bac050d46ab05c98910 100644
--- a/packages/ui-vue/components/lookup/src/property-config/lookup.property-config.ts
+++ b/packages/ui-vue/components/lookup/src/property-config/lookup.property-config.ts
@@ -11,6 +11,13 @@ import { DesignerComponentInstance } from "../../../designer-canvas/src/types";
 export const LookupSchemaRepositoryToken = Symbol('schema_repository_token');
 
 export class LookupPropertyConfig extends InputBaseProperty {
+
+    private comboListEditor = {
+        type: 'combo-list',
+        enableClear: false,
+        editable: false
+    };
+
     getPropertyConfig(propertyData: any, componentInstance: DesignerComponentInstance) {
         const basic = this.getBasicProperties(propertyData, componentInstance);
         const appearance = this.getAppearanceConfig();
@@ -22,7 +29,7 @@ export class LookupPropertyConfig extends InputBaseProperty {
             categories: {
                 basic,
                 appearance,
-                behavior,
+                // behavior,
                 lookup
             }
         };
@@ -75,11 +82,26 @@ export class LookupPropertyConfig extends InputBaseProperty {
         };
     }
 
+
     private getLookupConfig(propertyData: any) {
         return {
             description: "Basic Infomation",
             title: "编辑器",
             properties: {
+                editable: {
+                    description: "",
+                    title: "允许编辑",
+                    type: "boolean",
+                    $converter: lookupDefaultConverter,
+                    editor: this.comboListEditor
+                },
+                readonly: {
+                    description: "",
+                    title: "只读",
+                    type: "boolean",
+                    $converter: lookupDefaultConverter,
+                    editor: {...this.comboListEditor, editable: true}
+                },
                 dataSource: {
                     description: "数据源",
                     title: "数据源",
@@ -221,6 +243,7 @@ export class LookupPropertyConfig extends InputBaseProperty {
                     $converter: lookupDefaultConverter,
                     title: "启用多选",
                     type: "boolean",
+                    editor: this.comboListEditor
                 },
                 separator: {
                     description: "多选分隔符",
diff --git a/packages/ui-vue/components/lookup/src/schema/lookup.schema.json b/packages/ui-vue/components/lookup/src/schema/lookup.schema.json
index 1ad9afde002e44b98d242295eb116dd76467446d..194c39f0d586bc124386bc787d48cba42c497664 100644
--- a/packages/ui-vue/components/lookup/src/schema/lookup.schema.json
+++ b/packages/ui-vue/components/lookup/src/schema/lookup.schema.json
@@ -119,6 +119,22 @@
         "context": {
             "type": "object",
             "default": null
+        },
+        "enableToSelect": {
+            "type": "boolean",
+            "default": true
+        },
+        "idValue": {
+            "type": "string",
+            "default": ""
+        },
+        "multiSelect":{
+            "type": "boolean",
+            "default": false
+        },
+        "separator": {
+            "type": "string",
+            "default": ","
         }
     },
     "required": [
diff --git a/packages/ui-vue/components/mapping-editor/src/mapping-editor.component.tsx b/packages/ui-vue/components/mapping-editor/src/mapping-editor.component.tsx
index f3629884bc4d3dfe9412ef5bd6f851cae530fc4f..de3d5dfb5bd882e19c494bd2a2716fa8ed765dd2 100644
--- a/packages/ui-vue/components/mapping-editor/src/mapping-editor.component.tsx
+++ b/packages/ui-vue/components/mapping-editor/src/mapping-editor.component.tsx
@@ -157,6 +157,7 @@ export default defineComponent({
             draggable: true,
             closedCallback: ($event, from) => {
                 if ($event.target.name === 'cancel' || from === 'icon' || from === 'esc') {
+                    mappingFields.value = props.modelValue;
                     mappingFieldList.value = getDataSource(); // 重置数据
                     selectedItems.value = [];
                 }
diff --git a/packages/ui-vue/components/modal/src/composition/use-resizeable.tsx b/packages/ui-vue/components/modal/src/composition/use-resizeable.tsx
index 44b0a32f124db5c3b4d7c50fdc2edf86f2d2c4ce..e23782f59266e655aa21db2e46ffb8e28938173c 100644
--- a/packages/ui-vue/components/modal/src/composition/use-resizeable.tsx
+++ b/packages/ui-vue/components/modal/src/composition/use-resizeable.tsx
@@ -266,7 +266,8 @@ export function useResizeable(props: any, context: any) {
         if (!allowDrag.value) {
             return;
         }
-
+        // 隐藏其他浮动层
+        document.body.click();
         // prevent default events
         event.stopPropagation();
         event.preventDefault();
@@ -292,6 +293,9 @@ export function useResizeable(props: any, context: any) {
     }
 
     function maximize(updateLastSize = true) {
+        // 隐藏其他浮动层
+        document.body.click();
+
         const container = boundingElement.value || document.body;
         const maxSize = Size.getCurrent(container);
         const target = resizedTarget.value as HTMLElement;
@@ -321,6 +325,9 @@ export function useResizeable(props: any, context: any) {
     }
 
     function restore() {
+        // 隐藏其他浮动层
+        document.body.click();
+
         if (lastSize.value) {
             const size = { width: lastSize.value.size.width || 0, height: lastSize.value.size.height || 0 };
             const position = { x: (window.innerWidth - size.width) / 2, y: (window.innerHeight - size.height) / 2};
@@ -365,6 +372,8 @@ export function useResizeable(props: any, context: any) {
             } else {
                 moveToCenter();
             }
+            // 隐藏其他浮动层
+            document.body.click();
         };
 
         window.addEventListener('resize',  windowResizeHandle);
diff --git a/packages/ui-vue/components/popover/src/composition/use-popup.ts b/packages/ui-vue/components/popover/src/composition/use-popup.ts
index 3a3f92cfc9fdcb3c9901c50fdbd0dfd8dd8fbf98..5cbe0ceaef6eea645db854e0929a3d75873bf6b7 100644
--- a/packages/ui-vue/components/popover/src/composition/use-popup.ts
+++ b/packages/ui-vue/components/popover/src/composition/use-popup.ts
@@ -17,23 +17,32 @@ export function usePopup(
     const { fitToReference, locateToReference } = usePositionComposition;
 
     // eslint-disable-next-line prefer-const
-    let hidePopverOnClickBodyHandler: ($event: MouseEvent) => any;
+    let hidePopverOnClickBodyHandler: ($event: MouseEvent | Event) => any;
 
     function hide() {
         showPopover.value = false;
-        document.body.removeEventListener('click', hidePopverOnClickBodyHandler);
-        document.body.removeEventListener('wheel', hidePopverOnClickBodyHandler);
+        document.body.addEventListener('click', hidePopverOnClickBodyHandler);
+        document.body.removeEventListener('mousedown', hidePopverOnClickBodyHandler);
+        document.body.removeEventListener('wheel', hidePopverOnClickBodyHandler, true);
+        document.removeEventListener('scroll', hidePopverOnClickBodyHandler);
         context.emit('hidden');
     }
 
-    hidePopverOnClickBodyHandler = ($event: MouseEvent) => {
+    hidePopverOnClickBodyHandler = ($event: MouseEvent | Event) => {
+        const isInReference = reference.value.contains($event.target as Node);
+
+        if($event.type === 'scroll' || ($event.type === 'wheel' && isInReference)) {
+            hide();
+            return;
+        }
 
         const closestPopoverElement = ($event.target as any)?.closest('.popover');
         if (closestPopoverElement && popoverRef.value && closestPopoverElement === popoverRef.value) {
+            $event.stopPropagation();
             return;
         }
 
-        if (!reference.value.contains($event.target as Node)) {
+        if (!isInReference && showPopover.value) {
             const closestPopover = reference.value.closest('.popover') as HTMLElement;
             if (closestPopover) {
                 closestPopover.removeEventListener('click', hidePopverOnClickBodyHandler);
@@ -52,7 +61,10 @@ export function usePopup(
             await nextTick();
             locateToReference(referenceElement);
             document.body.addEventListener('click', hidePopverOnClickBodyHandler);
+            document.body.addEventListener('mousedown', hidePopverOnClickBodyHandler);
             document.body.addEventListener('wheel', hidePopverOnClickBodyHandler, true);
+            document.addEventListener('scroll', hidePopverOnClickBodyHandler);
+    
             const closestPopover = referenceElement.closest('.popover') as HTMLElement;
             if (closestPopover) {
                 closestPopover.addEventListener('click', hidePopverOnClickBodyHandler);
diff --git a/packages/ui-vue/components/popover/src/composition/use-position.ts b/packages/ui-vue/components/popover/src/composition/use-position.ts
index d6d71beb59544298b5a8c806678a12f78ec11405..970c76f37321e5ee1b68f68de7839a6d08580770 100644
--- a/packages/ui-vue/components/popover/src/composition/use-position.ts
+++ b/packages/ui-vue/components/popover/src/composition/use-position.ts
@@ -17,7 +17,7 @@ export function usePosition(
 
     const offsetX = ref(0);
     const originalOffsetX = ref(props.offsetX?.value || 0);
-    const popoverWidth = ref(props.minWidth);
+    const popoverWidth = ref(-1);
     const originalReferenceTop = ref(-1);
     const originalReferenceLeft = ref(-1);
     const position = ref(props.placement);
@@ -45,6 +45,11 @@ export function usePosition(
         if (popoverWidth.value !== -1) {
             styleObject.width = `${popoverWidth.value}px`;
         }
+
+        if (props.minWidth !== -1) {
+            styleObject.minWidth = `${props.minWidth}px`;
+        }
+
         return styleObject;
     });
 
@@ -108,10 +113,40 @@ export function usePosition(
         return { popoverLeft, popoverTop, arrowLeft };
     }
 
+    function calcultePopoverPositionOnAuto(popoverRect: DOMRect, referenceRect: DOMRect, arrowRect: DOMRect): PopoverPosition {
+        const intendingToPopoverLeft = referenceRect.left - hostLeft.value;
+        let popoverLeft = 0;
+        let popoverTop = 0;
+        let arrowLeft = 0;
+
+        let arrowPosition = 'bottom-left';
+
+        if (window.innerWidth - intendingToPopoverLeft > popoverRect.width) {
+            popoverLeft = intendingToPopoverLeft + scrollLeft.value;
+        } else {
+            popoverLeft = referenceRect.left + referenceRect.width - popoverRect.width + scrollLeft.value;
+            arrowLeft = popoverRect.width - arrowRect.width - 20;
+        }
+
+        const intendingToPopoverTop = (referenceRect.top - hostTop.value) + (referenceRect.height + arrowRect.height);
+
+        if (window.innerHeight - intendingToPopoverTop > popoverRect.height) {
+            popoverTop = intendingToPopoverTop + scrollTop.value;
+        } else {
+            popoverTop = referenceRect.top - popoverRect.height - arrowRect.height + scrollTop.value;
+            arrowPosition = 'top';
+        }
+        popoverRef.value.classList.add('popover-'+ arrowPosition, 'bs-popover-'+ arrowPosition);
+
+        return {popoverLeft, popoverTop, arrowLeft};
+    }
+
+
     const postionMap = new Map<string, (popoverRect: DOMRect, referenceRect: DOMRect, arrowRect: DOMRect) => PopoverPosition>([
         ['top', calculatePopoverPostionOnTop],
         ['bottom', calculatePopoverPositionOnBottom],
-        ['bottom-left', calcultePopoverPositionOnBottomLeft]
+        ['bottom-left', calcultePopoverPositionOnBottomLeft],
+        ['auto', calcultePopoverPositionOnAuto]
     ]);
 
     function locateToReference(referenceElement: HTMLElement) {
@@ -120,6 +155,7 @@ export function usePosition(
         originalReferenceLeft.value = referenceRect.left;
         const arrowRect = arrowRef.value?.getBoundingClientRect();
         const popoverRect = popoverRef.value?.getBoundingClientRect();
+        popoverWidth.value = popoverRect.width;
         const calculatePopoverPosition = postionMap.get(position.value);
         if (calculatePopoverPosition) {
             const { arrowLeft, popoverLeft, popoverTop } = calculatePopoverPosition(popoverRect, referenceRect, arrowRect);
diff --git a/packages/ui-vue/components/popover/src/popover.component.tsx b/packages/ui-vue/components/popover/src/popover.component.tsx
index 61546faad9a4eb4de7977a542294786c3dd8cd8c..46351413f1506c010ef14c0913be5b47335bef56 100644
--- a/packages/ui-vue/components/popover/src/popover.component.tsx
+++ b/packages/ui-vue/components/popover/src/popover.component.tsx
@@ -81,6 +81,7 @@ export default defineComponent({
             return (
                 <Teleport to={host}>
                     <div ref={popoverRef} class={popoverClass.value} style={popoverStyle.value} v-show={showPopover.value}
+                        onMousedown={(payload: MouseEvent) => { payload.stopPropagation(); }}
                         onClick={(payload: MouseEvent) => { payload.stopPropagation(); }}>
                         <div ref={arrowRef} class="popover-arrow arrow" style={arrowStyle.value}></div>
                         {shouldShowTitle.value && <h3 class="popover-title popover-header">{props.title}</h3>}
diff --git a/packages/ui-vue/src/app.vue b/packages/ui-vue/src/app.vue
index 005a56c65f710b89c21f4b18c9dd023b6d6747e0..27a9eb9243811e45668805087043294e815aa0c5 100644
--- a/packages/ui-vue/src/app.vue
+++ b/packages/ui-vue/src/app.vue
@@ -423,6 +423,7 @@ const routes: Record<string, any> = {
     '/loading/delay': LoadingDelay,
     '/loading/icon': LoadingIcon,
     '/loading/show': LoadingShow,
+    '/lookup/basic': LookupBasic,
     '/icon/basic': IconBasic,
     '/icon/common': IconCommon,
     '/icon/others': IconOthers,