a-range-picker 组件 增加属性getPopupContainer 选择完之后下拉面板无法收起的问题

[jiayuexin]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Version

ant-design-vue: 4.0.1

Environment

vue: 3.2.13

Steps to reproduce

1, 使用 a-range-picker 组件 添加属性

getPopupContainer="(node: { parentNode: unknown }) => {
if (node) {
return node.parentNode
}
return document.body
}"

2, 进行操作选择日期 开始结束选择完毕, 下拉框 先是关闭一下, 然后自动打开了, 视觉上就是抖动一下, 处于打开状态 3, 代码如下

<a-range-picker
       :getPopupContainer="getPopupContainer"
 />
const getPopupContainer = (node: { parentNode: unknown }) => {if (node) {return node.parentNode}return document.body}

这样就可以复现该问题

What is expected?

希望增加该属性getPopupContainer不抖动, 可以正常关闭

What is actually happening?

ant-design-vue4 存在的问题

---

希望尽快修复

[jiayuexin]

在选中第二个值的时候, 下拉面板会关闭, 同时切换成图中样子

[Yin55]

同问

[likui628]

可复现的完整的代码

<template>
  <Form
    :model="formState"
    name="time_related_controls"
    v-bind="formItemLayout"
    @finish="onFinish"
    @finishFailed="onFinishFailed"
  >
    <FormItem name="range-picker" label="RangePicker" v-bind="rangeConfig">
      <RangePicker
        :getPopupContainer="getPopupContainer"
        v-model:value="formState['range-picker']"
        value-format="YYYY-MM-DD"
      />
    </FormItem>
    <FormItem
      :wrapper-col="{
        xs: { span: 24, offset: 0 },
        sm: { span: 16, offset: 8 },
      }"
    >
      <Button type="primary" html-type="submit">Submit</Button>
    </FormItem>
  </Form>
</template>
<script lang="ts" setup>
import { reactive } from "vue";
import {
  Form,
  FormItem,
  Button,
  RangePicker,
} from "ant-design-vue";

interface FormState {
  "range-picker": [string, string];
}
const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 8 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 16 },
  },
};
const rangeConfig = {
  rules: [
    { type: "array" as const, required: true, message: "Please select time!" },
  ],
};
const formState = reactive({} as FormState);
const onFinish = (values: any) => {
  console.log("Success:", values, formState);
};

const onFinishFailed = (errorInfo: any) => {
  console.log("Failed:", errorInfo);
};

const getPopupContainer = (trigger: Element) =>
  trigger.parentNode as HTMLElement;
</script>

[DesignHhuang]

可复现的完整的代码

<template>
  <Form
    :model="formState"
    name="time_related_controls"
    v-bind="formItemLayout"
    @finish="onFinish"
    @finishFailed="onFinishFailed"
  >
    <FormItem name="range-picker" label="RangePicker" v-bind="rangeConfig">
      <RangePicker
        :getPopupContainer="getPopupContainer"
        v-model:value="formState['range-picker']"
        value-format="YYYY-MM-DD"
      />
    </FormItem>
    <FormItem
      :wrapper-col="{
        xs: { span: 24, offset: 0 },
        sm: { span: 16, offset: 8 },
      }"
    >
      <Button type="primary" html-type="submit">Submit</Button>
    </FormItem>
  </Form>
</template>
<script lang="ts" setup>
import { reactive } from "vue";
import {
  Form,
  FormItem,
  Button,
  RangePicker,
} from "ant-design-vue";

interface FormState {
  "range-picker": [string, string];
}
const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 8 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 16 },
  },
};
const rangeConfig = {
  rules: [
    { type: "array" as const, required: true, message: "Please select time!" },
  ],
};
const formState = reactive({} as FormState);
const onFinish = (values: any) => {
  console.log("Success:", values, formState);
};

const onFinishFailed = (errorInfo: any) => {
  console.log("Failed:", errorInfo);
};

const getPopupContainer = (trigger: Element) =>
  trigger.parentNode as HTMLElement;
</script>

@likui628 我看了下源码，感觉是冒泡的问题，提交了个PR 等待合并

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.