feat(CategorySearch): 支持配置是否自动聚焦搜索框

Author: xingyan

packages/devui-vue/devui/category-search/src/category-search-types.ts

@@ -203,6 +203,10 @@ export const categorySearchProps = {
   appendToBody: {
     type: Boolean,
     default: true
+  },
+  inputAutofocus: {
+    type: Boolean,
+    default: true
   }
 };
 export type CategorySearchProps = ExtractPropTypes<typeof categorySearchProps>;

packages/devui-vue/devui/category-search/src/composables/use-category-search.ts

@@ -173,7 +173,7 @@ export function useCategorySearch(props: CategorySearchProps, ctx: SetupContext)
 
   const onSearchKeyTagClick = () => {
     innerSearchKey.value = searchKeyCache;
-    inputRef.value.focus();
+    props.inputAutofocus && inputRef.value.focus();
     ctx.emit('searchKeyChange', innerSearchKey.value);
   };
 
@@ -209,7 +209,7 @@ export function useCategorySearch(props: CategorySearchProps, ctx: SetupContext)
       }
       currentSelectTag.value.title = setTitle(currentSelectTag.value, currentSelectTag.value.type || '', '');
       inputRef.value.openMenu();
-      inputRef.value.focus();
+      props.inputAutofocus && inputRef.value.focus();
     }, DROPDOWN_ANIMATION_TIMEOUT);
   };
 
@@ -482,7 +482,7 @@ export function useCategorySearch(props: CategorySearchProps, ctx: SetupContext)
 
   function finishChoose() {
     currentSelectTag.value = undefined;
-    inputRef.value.focus();
+    props.inputAutofocus && inputRef.value.focus();
   }
 
   function afterDropdownClosed() {
@@ -665,7 +665,7 @@ export function useCategorySearch(props: CategorySearchProps, ctx: SetupContext)
       }
     } else if (!isInit) {
       // 初始化不聚焦，避免展开下拉
-      inputRef.value.focus();
+      props.inputAutofocus && inputRef.value.focus();
     }
   }
 

packages/devui-vue/docs/components/category-search/index.md

@@ -372,6 +372,7 @@ export default defineComponent({
 | extend-config        | [ExtendConfig](#extendconfig)                                                                        | --     | 可选，配置右侧扩展按钮功能                                                               | [自定义扩展按钮](#自定义扩展按钮) |
 | tag-max-width        | `number`                                                                                             | --     | 可选，单个过滤条件的最大宽度，超过则显示省略号，不设置则不限制                           | [自定义展示模板](#自定义展示模板) |
 | append-to-body       | `boolean`                                                                                            | true   | 可选，下拉菜单是否 append to body                                                        |                                   |
+| input-autofocus      | `boolean`                                                                                            | true   | 可选，是否允许自动聚焦搜索框，规避有滚动条场景下自动聚焦导致的位移                       |
 
 ### CategorySearch 事件