[DatePicker] After blur, the value dose NOT update as user typed

[gaokun]

trafficstars

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

Version

4.x and 3.x

Environment

offcial website

Reproduction link

https://next.antdv.com/components/date-picker-cn

Steps to reproduce

1. open https://next.antdv.com/components/date-picker-cn
2. choose a datepicker, select '2024-04-02'
3. focus the picker, update text as '2024-04-03'
4. click outside (blur)

What is expected?

the value should be updated as '2024-04-03'

What is actually happening?

the value is still '2024-04-02'

---

I did same test on 'ant-deisgn react' and 'ant-design-vue 2.x', works find for both of them.

The issue only happens on ant-design-vue 4.x and 3.x

[gaokun]

Saw this comment

/**
   * We will prevent blur to handle open event when user click outside,
   * since this will repeat trigger `onOpenChange` event.
   */

Can we find a balance way on that?

[gaokun]

Plz refer to below

change triggerOpen(false) to onSubmit() will resolve my question

  // Global click handler
  onMounted(() => {
    globalMousedownEvent.value = addGlobalMousedownEvent((e: MouseEvent) => {
      const target = getTargetFromEvent(e);

      if (open.value) {
        const clickedOutside = isClickOutside(target);

        if (!clickedOutside) {
          preventBlurRef.value = true;

          // Always set back in case `onBlur` prevented by user
          raf(() => {
            preventBlurRef.value = false;
          });
        } else if (!focused.value || clickedOutside) {
          triggerOpen(false);   // change to `onSubmit()` will resolve my question
        }
      }
    });
  });

[github-actions[bot]]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days

[ChangJin0520]

I encountered the same problem. Losing focus does not change the value, which gives users a wrong perception.

[MySecret]

删除onBlur里面的triggerOpen(false);就可以了。

[github-actions[bot]]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days

[fq1798]

终于解决了：以下是参考思路,，献给各位道友：

<template>
  <a-date-picker ref="simpleDatePicker" format="YYYY-MM-DD" />
</template>


<script setup name="JDatePicker">
import {onMounted, onUnmounted, ref} from "vue";

const simpleDatePicker = ref();
const value = ref();

const emit = defineEmits('change');

const handleDatePickerBlur: any = (e, n) => {
  // 2020-02-02
  if(e.target.value.length == 10) {
    // value.value = e.target.value;

    emit('change',  e.target.value);
  }

}

onMounted(() => {
  // 监听 change 事件
  document.querySelector(".ant-picker-input")
      .querySelector("input").addEventListener('input', handleDatePickerBlur);
});

onUnmounted(() => {
  // 移除 change 事件监听器
  document.querySelector(".ant-picker-input")
      .querySelector("input").removeEventListener('input', handleDatePickerBlur);
});



</script>