+
{inputEnableStatus.value.enableInternalInput && (
<ɵInput
ref={inputInstance}
@@ -99,7 +93,7 @@ export default defineComponent({
,
<ɵFooter v-slots={slots} class={`${prefixCls}-footer`} footer={props.footer} />,
]
- return props.overlayRender ? props.overlayRender(children) :
{children}
+ return props.overlayRender ? props.overlayRender(children) :
{children}
}
},
})
diff --git a/packages/components/time-picker/src/content/RangeContent.tsx b/packages/components/time-picker/src/content/RangeContent.tsx
index 4fbc542fc..bf24318a1 100644
--- a/packages/components/time-picker/src/content/RangeContent.tsx
+++ b/packages/components/time-picker/src/content/RangeContent.tsx
@@ -60,12 +60,6 @@ export default defineComponent({
setOverlayOpened(false)
}
- const handleMouseDown = (e: MouseEvent) => {
- if (!(e.target instanceof HTMLInputElement)) {
- e.preventDefault()
- }
- }
-
function renderBoard(isFrom: boolean) {
const {
inputValue,
@@ -124,7 +118,7 @@ export default defineComponent({
}
const children = [
-
+
{renderBoard(true)}
{inputEnableStatus.value.enableInternalInput && renderSeparator()}
{renderBoard(false)}
@@ -139,7 +133,7 @@ export default defineComponent({
ok={handleConfirm}
/>,
]
- return props.overlayRender ? props.overlayRender(children) :
{children}
+ return props.overlayRender ? props.overlayRender(children) :
{children}
}
},
})
diff --git a/packages/components/time-picker/src/types.ts b/packages/components/time-picker/src/types.ts
index ee961b1e4..28c458ed3 100644
--- a/packages/components/time-picker/src/types.ts
+++ b/packages/components/time-picker/src/types.ts
@@ -53,6 +53,7 @@ const timePickerCommonProps = {
type: [String, HTMLElement, Function] as PropType
,
default: undefined,
},
+ overlayTabindex: { type: Number, default: undefined },
overlayRender: Function as PropType<(children: VNode[]) => VNodeChild>,
readonly: {
type: Boolean as PropType,
diff --git a/packages/components/tree-select/docs/Api.zh.md b/packages/components/tree-select/docs/Api.zh.md
index 2a2198d8c..0b08871fe 100644
--- a/packages/components/tree-select/docs/Api.zh.md
+++ b/packages/components/tree-select/docs/Api.zh.md
@@ -36,6 +36,7 @@
| `overlayContainer` | 自定义浮层容器节点 | `string \| HTMLElement \| (trigger?: Element) => string \| HTMLElement` | - | ✅ | - |
| `overlayMatchWidth` | 下拉菜单和选择器同宽 | `boolean \| 'minWidth'` | `true` | ✅ | - |
| `overlayRender` | 自定义下拉菜单内容的渲染 | `(children:VNode[]) => VNodeTypes` | - | - | - |
+| `overlayTabindex` | 自定义浮层tabindex | `number` | - | ✅ | - |
| `placeholder` | 选择框默认文本 | `string` | - | - | - |
| `readonly` | 只读模式 | `boolean` | - | - | - |
| `searchFn` | 搜索函数 | `boolean | (node: TreeSelectNode, searchValue?: string) => boolean` | `true` | - | 为 `true` 时使用默认的搜索规则, 如果使用远程搜索,应该设置为 `false` |
diff --git a/packages/components/tree-select/src/TreeSelect.tsx b/packages/components/tree-select/src/TreeSelect.tsx
index 99c478218..70e97f53f 100644
--- a/packages/components/tree-select/src/TreeSelect.tsx
+++ b/packages/components/tree-select/src/TreeSelect.tsx
@@ -87,12 +87,6 @@ export default defineComponent({
clearInput()
})
- const handleOverlayClick = () => {
- if (props.searchable !== 'overlay') {
- setTimeout(focus)
- }
- }
-
const handleNodeClick = () => {
if (!props.multiple) {
setOverlayOpened(false)
@@ -182,7 +176,7 @@ export default defineComponent({
return spinProps ? {children} : children
}
- const renderContent = () => renderLoading()
+ const renderContent = () => renderLoading()
return () => {
const triggerProps = {
@@ -198,6 +192,7 @@ export default defineComponent({
overlayClassName: overlayClasses.value,
overlayContainer: props.overlayContainer ?? config.overlayContainer,
overlayContainerFallback: `.${mergedPrefixCls.value}-overlay-container`,
+ overlayTabindex: props.overlayTabindex ?? config.overlayTabindex,
overlayMatchWidth: props.overlayMatchWidth ?? config.overlayMatchWidth,
'onUpdate:open': setOverlayOpened,
onFocus: handleFocus,
diff --git a/packages/components/tree-select/src/types.ts b/packages/components/tree-select/src/types.ts
index 554d727c7..903e695ea 100644
--- a/packages/components/tree-select/src/types.ts
+++ b/packages/components/tree-select/src/types.ts
@@ -68,6 +68,7 @@ export const treeSelectProps = {
type: [String, HTMLElement, Function] as PropType,
default: undefined,
},
+ overlayTabindex: { type: Number, default: undefined },
overlayMatchWidth: { type: [Boolean, String] as PropType, default: undefined },
overlayRender: { type: Function as PropType<(children: VNode[]) => VNodeChild>, default: undefined },
placeholder: { type: String, default: undefined },
diff --git a/packages/components/utils/src/useOverlayFocusMonitor.ts b/packages/components/utils/src/useOverlayFocusMonitor.ts
index 6f8c538b8..3136899f9 100644
--- a/packages/components/utils/src/useOverlayFocusMonitor.ts
+++ b/packages/components/utils/src/useOverlayFocusMonitor.ts
@@ -90,7 +90,7 @@ export function useOverlayFocusMonitor(
}
const bindOverlayMonitor = (overlayRef: Ref<ɵOverlayInstance | undefined>, overlayOpened: Ref) => {
- let stop: () => void | undefined
+ let stop: (() => void) | undefined
const stopWatch = watch(
[() => overlayRef.value?.getPopperElement(), overlayOpened],
@@ -101,7 +101,7 @@ export function useOverlayFocusMonitor(
return
}
- stop = _bindMonitor(el)
+ stop = _bindMonitor(el, true)
},
{
immediate: true,
diff --git a/packages/pro/config/src/types.ts b/packages/pro/config/src/types.ts
index d8f3b1f1d..a8a5e9b7e 100644
--- a/packages/pro/config/src/types.ts
+++ b/packages/pro/config/src/types.ts
@@ -7,8 +7,8 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
-import type { PortalTargetType } from '@idux/cdk/portal'
import type { FormSize } from '@idux/components/form'
+import type { OverlayContainerType } from '@idux/components/utils'
import type { ProFormSchemaFormatter } from '@idux/pro/form'
import type { ProLocale } from '@idux/pro/locales'
import type { ProSearchSize } from '@idux/pro/search'
@@ -85,6 +85,9 @@ export interface ProTagSelectConfig {
borderless: boolean
clearable: boolean
clearIcon: string
+ overlayContainer?: OverlayContainerType
+ overlayTabindex?: number
+
size: FormSize
suffix: string
}
@@ -99,7 +102,7 @@ export interface ProSearchConfig {
clearIcon: string | VNode
searchIcon: string | VNode
size: ProSearchSize
- overlayContainer?: PortalTargetType
+ overlayContainer?: OverlayContainerType
}
export interface ProTextareaConfig {
diff --git a/packages/pro/search/src/components/quickSelect/QuickSelectPanel.tsx b/packages/pro/search/src/components/quickSelect/QuickSelectPanel.tsx
index 92652f78e..19f5d22cf 100644
--- a/packages/pro/search/src/components/quickSelect/QuickSelectPanel.tsx
+++ b/packages/pro/search/src/components/quickSelect/QuickSelectPanel.tsx
@@ -11,7 +11,7 @@ import { type VNodeChild, computed, defineComponent, inject, watch } from 'vue'
import { isNil } from 'lodash-es'
-import { type VKey, isEmptyNode, useState } from '@idux/cdk/utils'
+import { type VKey, isEmptyNode, isFocusable, useState } from '@idux/cdk/utils'
import QuickSelectPanelItem from './QuickSelectItem'
import QuickSelectPanelShortcut from './QuickSelectShortcut'
@@ -61,7 +61,7 @@ export default defineComponent({
})
const handleMouseDown = (evt: MouseEvent) => {
- if (!(evt.target instanceof HTMLInputElement)) {
+ if (!isFocusable(evt.target)) {
evt.preventDefault()
tempSegmentInputRef.value?.focus()
}
diff --git a/packages/pro/search/src/composables/useControl.ts b/packages/pro/search/src/composables/useControl.ts
index 496ed77e5..2d7b3a5d4 100644
--- a/packages/pro/search/src/composables/useControl.ts
+++ b/packages/pro/search/src/composables/useControl.ts
@@ -11,7 +11,7 @@ import type { SearchStateContext } from './useSearchStates'
import { type Ref, onBeforeUnmount, watch } from 'vue'
-import { useEventListener } from '@idux/cdk/utils'
+import { isFocusable, useEventListener } from '@idux/cdk/utils'
export function useControl(
elementRef: Ref,
@@ -55,7 +55,7 @@ export function useControl(
setOverlayOpened(true)
}
- if (!(evt.target instanceof HTMLInputElement)) {
+ if (!isFocusable(evt.target)) {
evt.preventDefault()
}
}),
diff --git a/packages/pro/tag-select/docs/Api.zh.md b/packages/pro/tag-select/docs/Api.zh.md
index fa26e05c9..aa424d677 100644
--- a/packages/pro/tag-select/docs/Api.zh.md
+++ b/packages/pro/tag-select/docs/Api.zh.md
@@ -22,6 +22,7 @@
| `overlayClassName` | 下拉菜单的 `class` | `string` | - | - | - |
| `overlayContainer` | 自定义下拉框容器节点 | `string \| HTMLElement \| (trigger?: Element) => string \| HTMLElement` | - | - | - |
| `overlayMatchWidth` | 下拉菜单和选择器同宽 | `boolean \| 'minWidth'` | `true` | - | - |
+| `overlayTabindex` | 自定义浮层tabindex | `number` | - | ✅ | - |
| `placeholder` | 选择框默认文本 | `string \| #placeholder` | - | - | - |
| `readonly` | 只读模式 | `boolean` | - | - | - |
| `removeConfirmHeader` | 删除标签的确认弹窗头部配置 | `string \| HeaderProps` | - | - | - |
diff --git a/packages/pro/tag-select/src/ProTagSelect.tsx b/packages/pro/tag-select/src/ProTagSelect.tsx
index 1ff72e80e..0f080a83a 100644
--- a/packages/pro/tag-select/src/ProTagSelect.tsx
+++ b/packages/pro/tag-select/src/ProTagSelect.tsx
@@ -220,8 +220,9 @@ export default defineComponent({
const controlTriggerProps = {
autofocus: false,
overlayClassName: overlayClasses.value,
- overlayContainer: props.overlayContainer,
+ overlayContainer: props.overlayContainer ?? config.overlayContainer,
overlayContainerFallback: `${mergedPrefixCls.value}-overlay-container`,
+ overlayTabindex: props.overlayTabindex ?? config.overlayTabindex,
overlayMatchWidth: props.overlayMatchWidth,
class: [mergedPrefixCls.value, globalHashId.value, hashId.value],
borderless,
diff --git a/packages/pro/tag-select/src/content/TagDataEditPanel.tsx b/packages/pro/tag-select/src/content/TagDataEditPanel.tsx
index 1ae9d41bf..1fbb9d40e 100644
--- a/packages/pro/tag-select/src/content/TagDataEditPanel.tsx
+++ b/packages/pro/tag-select/src/content/TagDataEditPanel.tsx
@@ -68,12 +68,6 @@ export default defineComponent({
handleTagDataRemove(props.data)
}
- const handlePanelMousedown = (evt: MouseEvent) => {
- if (!(evt.target instanceof HTMLInputElement)) {
- evt.preventDefault()
- }
- }
-
const renderColorItem = (prefixCls: string, color: TagSelectColor) => {
const isSelected = color.key === props.data.color.key
const colorItemPrefixCls = `${prefixCls}-item`
@@ -119,7 +113,7 @@ export default defineComponent({
const prefixCls = `${mergedPrefixCls.value}-edit-panel`
return (
-
+
{
setEditPanelOpened(false)
- if (!(evt.target instanceof HTMLInputElement)) {
+ if (!isFocusable(evt.target)) {
evt.preventDefault()
}
}
diff --git a/packages/pro/tag-select/src/types.ts b/packages/pro/tag-select/src/types.ts
index dfccf36e8..c7b0f41f0 100644
--- a/packages/pro/tag-select/src/types.ts
+++ b/packages/pro/tag-select/src/types.ts
@@ -55,6 +55,7 @@ export const proTagSelectProps = {
type: [String, HTMLElement, Function] as PropType,
default: undefined,
},
+ overlayTabindex: { type: Number, default: undefined },
overlayMatchWidth: { type: [Boolean, String] as PropType, default: 'minWidth' },
placeholder: { type: String, default: undefined },
readonly: { type: Boolean, default: false },