github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix(Select): dropdownRender inside dropdown box disappears when the input box gains focus (#7020) 

Co-authored-by: undefined <undefined>
pull/7025/head
selicens 2023-10-16 15:03:37 +08:00 committed by GitHub
parent 4a1296bb3f
commit 380fcd4aa9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 33 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
components/select/demo/custom-dropdown-menu.vue
View File

@ -19,20 +19,22 @@ Customize the dropdown menu via `dropdownRender`.
<template> <template>
<a-select <a-select
v-model:value="value" v-model:value="value"
style="width: 120px" placeholder="custom dropdown render"
style="width: 300px"
:options="items.map(item => ({ value: item }))" :options="items.map(item => ({ value: item }))"
> >
<template #dropdownRender="{ menuNode: menu }"> <template #dropdownRender="{ menuNode: menu }">
<v-nodes :vnodes="menu" /> <v-nodes :vnodes="menu" />
<a-divider style="margin: 4px 0" /> <a-divider style="margin: 4px 0" />
<div <a-space style="padding: 4px 8px">
style="padding: 4px 8px; cursor: pointer" <a-input ref="inputRef" v-model:value="name" placeholder="Please enter item" />
@mousedown="e => e.preventDefault()" <a-button type="text" @click="addItem">
@click="addItem" <template #icon>
> <plus-outlined />
<plus-outlined /> </template>
Add item Add item
</div> </a-button>
</a-space>
</template> </template>
</a-select> </a-select>
</template> </template>
@ -54,10 +56,17 @@ const VNodes = defineComponent({
let index = 0; let index = 0;
const items = ref(['jack', 'lucy']); const items = ref(['jack', 'lucy']);
const value = ref('lucy'); const value = ref();
const inputRef = ref();
const name = ref();
const addItem = () => { const addItem = e => {
e.preventDefault();
console.log('addItem'); console.log('addItem');
items.value.push(`New item ${(index += 1)}`); items.value.push(name.value || `New item ${(index += 1)}`);
name.value = '';
setTimeout(() => {
inputRef.value?.focus();
}, 0);
}; };
</script> </script>

16
components/vc-select/BaseSelect.tsx
View File

@ -27,6 +27,7 @@ import {
toRefs, toRefs,
watch, watch,
watchEffect, watchEffect,
ref,
} from 'vue'; } from 'vue';
import type { CSSProperties, ExtractPropTypes, PropType } from 'vue'; import type { CSSProperties, ExtractPropTypes, PropType } from 'vue';
import PropTypes from '../_util/vue-types'; import PropTypes from '../_util/vue-types';
@ -280,6 +281,7 @@ export default defineComponent({
const triggerRef = shallowRef<RefTriggerProps>(null); const triggerRef = shallowRef<RefTriggerProps>(null);
const selectorRef = shallowRef<RefSelectorProps>(null); const selectorRef = shallowRef<RefSelectorProps>(null);
const listRef = shallowRef<RefOptionListProps>(null); const listRef = shallowRef<RefOptionListProps>(null);
const blurRef = ref<boolean>(false);
/** Used for component focused management */ /** Used for component focused management */
const [mockFocused, setMockFocused, cancelSetMockFocused] = useDelayReset(); const [mockFocused, setMockFocused, cancelSetMockFocused] = useDelayReset();
@ -339,10 +341,10 @@ export default defineComponent({
const onToggleOpen = (newOpen?: boolean) => { const onToggleOpen = (newOpen?: boolean) => {
const nextOpen = newOpen !== undefined ? newOpen : !mergedOpen.value; const nextOpen = newOpen !== undefined ? newOpen : !mergedOpen.value;
if (innerOpen.value !== nextOpen && !props.disabled) { if (!props.disabled) {
setInnerOpen(nextOpen); setInnerOpen(nextOpen);
if (props.onDropdownVisibleChange) { if (mergedOpen.value !== nextOpen) {
props.onDropdownVisibleChange(nextOpen); props.onDropdownVisibleChange && props.onDropdownVisibleChange(nextOpen);
} }
} }
}; };
@ -413,6 +415,9 @@ export default defineComponent({
if (innerOpen.value && !!props.disabled) { if (innerOpen.value && !!props.disabled) {
setInnerOpen(false); setInnerOpen(false);
} }
if (props.disabled && !blurRef.value) {
setMockFocused(false);
}
}, },
{ immediate: true }, { immediate: true },
); );
@ -524,9 +529,12 @@ export default defineComponent({
}; };
const onContainerBlur: FocusEventHandler = (...args) => { const onContainerBlur: FocusEventHandler = (...args) => {
blurRef.value = true;
setMockFocused(false, () => { setMockFocused(false, () => {
focusRef.value = false; focusRef.value = false;
onToggleOpen(false); blurRef.value = false;
//onToggleOpen(false);
}); });
if (props.disabled) { if (props.disabled) {