fix(date-picker): [date-picker] fixed the issue that entering date did not work (#1386)

* fix(date-picker): [date-picker] fixed the issue that entering date did not work * test(date-picker): fix date-picker e2e test error
2024-02-08 14:10:14 +08:00 · 2024-02-08 14:10:14 +08:00 · eec945ee91
parent 87f1d3cbdb
commit eec945ee91
7 changed files with 64 additions and 47 deletions
--- a/examples/sites/demos/pc/app/date-picker/basic-usage.spec.ts
+++ b/examples/sites/demos/pc/app/date-picker/basic-usage.spec.ts
@ -4,78 +4,73 @@ test('[DatePicker] 测试日期选择和清除', async ({ page }) => {
  page.on('pageerror', (exception) => expect(exception).toBeNull())
  await page.goto('date-picker#basic-usage')

-  const dateInput = page.getByRole('textbox', { name: '2023-05-20' })
-  const dateInput2 = page.getByRole('textbox', { name: '2023-05-21' })
+  const dateInput = page.getByPlaceholder('请选择日期').nth(1)

  await page.getByPlaceholder('请选择日期').nth(1).fill('2023-05-20')
  await page.getByPlaceholder('请选择日期').nth(1).press('Enter')
-  await expect(dateInput).toBeVisible()
+  await expect(dateInput).toHaveValue('2023-05-20')

  // 测试日期选择
  await dateInput.click()
  await page.getByRole('cell', { name: '21' }).getByText('21').click()
-  await expect(dateInput2).toBeVisible()
+  await expect(dateInput).toHaveValue('2023-05-21')
 })

 test('[DatePicker] 测试上一月/下一月/前一年/后一年', async ({ page }) => {
  page.on('pageerror', (exception) => expect(exception).toBeNull())
  await page.goto('date-picker#basic-usage')

-  const dateInputNextMonth = page.getByRole('textbox', { name: '2023-06-04' })
-  const dateInputNextYear = page.getByRole('textbox', { name: '2024-06-10' })
-  const dateInputPreMonth = page.getByRole('textbox', { name: '2023-05-14' })
-  const dateInputPreYear = page.getByRole('textbox', { name: '2023-06-11' })
+  const dateInput = page.getByPlaceholder('请选择日期').nth(1)

  // 先输入一个日期，确保后续选中的月份、年份正确
  await page.getByPlaceholder('请选择日期').nth(1).fill('2023-05-20')
  await page.getByPlaceholder('请选择日期').nth(1).press('Enter')

  // 下一月/后一年
-  await page.getByRole('textbox', { name: '2023-05-20' }).click()
+  await dateInput.click()
  await page.getByRole('button', { name: '下个月' }).click()
  await page.getByRole('row', { name: '4 5 6 7 8 9 10' }).getByText('4').click()
-  await expect(dateInputNextMonth).toBeVisible()
+  await expect(dateInput).toHaveValue('2023-06-04')

-  await dateInputNextMonth.click()
+  await dateInput.click()
  await page.getByRole('button', { name: '后一年' }).click()
  await page.getByRole('cell', { name: '10' }).getByText('10').click()
-  await expect(dateInputNextYear).toBeVisible()
+  await expect(dateInput).toHaveValue('2024-06-10')

  // 前一年/上一月
-  await dateInputNextYear.click()
+  await dateInput.click()
  await page.getByRole('button', { name: '前一年' }).click()
  await page.getByRole('cell', { name: '11' }).getByText('11').click()
-  await expect(dateInputPreYear).toBeVisible()
+  await expect(dateInput).toHaveValue('2023-06-11')

-  await dateInputPreYear.click()
+  await dateInput.click()
  await page.getByRole('button', { name: '上个月' }).click()
  await page.getByRole('cell', { name: '14' }).getByText('14').click()
-  await expect(dateInputPreMonth).toBeVisible()
+  await expect(dateInput).toHaveValue('2023-05-14')
 })

 test('[DatePicker] 测试月份/年份选择', async ({ page }) => {
  page.on('pageerror', (exception) => expect(exception).toBeNull())
  await page.goto('date-picker#basic-usage')

-  const dateInputMonth = page.getByRole('textbox', { name: '2023-06-04' })
-  const dateInputYear = page.getByRole('textbox', { name: '2024-02-07' })
+  const dateInput = page.getByPlaceholder('请选择日期').nth(1)

  // 先输入一个日期，确保后续选中的月份、年份正确
  await page.getByPlaceholder('请选择日期').nth(1).fill('2023-04-20')
  await page.getByPlaceholder('请选择日期').nth(1).press('Enter')

  // 选择月份
-  await page.getByRole('textbox', { name: '2023-04-20' }).click()
+  await dateInput.click()
  await page.getByRole('button', { name: '4 月' }).click()
  await page.getByText('六月').click()
  await page.getByRole('row', { name: '4 5 6 7 8 9 10' }).getByText('4').click()
-  await expect(dateInputMonth).toBeVisible()
+  await expect(dateInput).toHaveValue('2023-06-04')

  // 选择年份
-  await dateInputMonth.click()
+  await dateInput.click()
  await page.getByRole('button', { name: '2023 年' }).click()
  await page.getByRole('cell', { name: '2024' }).getByText('2024').click()
  await page.getByText('二月', { exact: true }).click()
  await page.getByRole('row', { name: '4 5 6 7 8 9 10' }).getByText('7').click()
-  await expect(dateInputYear).toBeVisible()
+  await expect(dateInput).toHaveValue('2024-02-07')
 })
--- a/examples/sites/demos/pc/app/date-picker/clear.spec.ts
+++ b/examples/sites/demos/pc/app/date-picker/clear.spec.ts
@ -4,15 +4,18 @@ test('[DatePicker] 测试清除输入', async ({ page }) => {
  page.on('pageerror', (exception) => expect(exception).toBeNull())
  await page.goto('date-picker#clear')

-  const datePickerDefaultClearIcon = page.getByRole('textbox', { name: '2023-05-24' }).first()
-  const datePickerHideClearIcon = page.getByRole('textbox', { name: '2023-05-24' }).nth(1)
-  const datePickerCustomClearIcon = page.getByRole('textbox', { name: '2023-05-24' }).nth(2)
+  const datePickerDefaultClearIcon = page.getByRole('textbox').nth(1)
+  const datePickerHideClearIcon = page.getByRole('textbox').nth(2)
+  const datePickerCustomClearIcon = page.getByRole('textbox').nth(3)
  const clearIcon = page.locator('.tiny-date-editor .tiny-input__icon-container .baseClearicon')

  // 默认显示清除按钮
  await datePickerDefaultClearIcon.hover()
  await expect(clearIcon).toBeVisible()
-  await expect(clearIcon.locator('path')).toHaveAttribute('d', 'M12 24C5.4 24 0 18.6 0 12S5.4 0 12 0s12 5.4 12 12-5.4 12-12 12zm4.8-8.4L13.2 12l3.6-3.6c.3-.3.3-.9 0-1.2-.3-.3-.9-.3-1.2 0L12 10.8 8.4 7.2c-.3-.3-.9-.3-1.2 0s-.3.9 0 1.2l3.6 3.6-3.6 3.6c-.3.3-.3.9 0 1.2.2.1.4.2.6.2s.4-.1.6-.2l3.6-3.6 3.6 3.6c.2.2.4.2.6.2.2 0 .4-.1.6-.2.3-.4.3-.9 0-1.2z')
+  await expect(clearIcon.locator('path')).toHaveAttribute(
+    'd',
+    'm13.4 12 6.3-6.3c.4-.4.4-1 0-1.4-.4-.4-1-.4-1.4 0L12 10.6 5.7 4.3c-.4-.4-1-.4-1.4 0-.4.4-.4 1 0 1.4l6.3 6.3-6.3 6.3c-.4.4-.4 1 0 1.4.2.2.4.3.7.3.3 0 .5-.1.7-.3l6.3-6.3 6.3 6.3c.2.2.4.3.7.3s.5-.1.7-.3c.4-.4.4-1 0-1.4L13.4 12z'
+  )

  // 隐藏清除按钮
  await datePickerHideClearIcon.hover()
@ -21,10 +24,13 @@ test('[DatePicker] 测试清除输入', async ({ page }) => {
  // 自定义清除图标
  await datePickerCustomClearIcon.hover()
  await expect(clearIcon).toBeVisible()
-  await expect(clearIcon.locator('path')).toHaveAttribute('d', 'm13.4 12 6.3-6.3c.4-.4.4-1 0-1.4-.4-.4-1-.4-1.4 0L12 10.6 5.7 4.3c-.4-.4-1-.4-1.4 0-.4.4-.4 1 0 1.4l6.3 6.3-6.3 6.3c-.4.4-.4 1 0 1.4.2.2.4.3.7.3.3 0 .5-.1.7-.3l6.3-6.3 6.3 6.3c.2.2.4.3.7.3s.5-.1.7-.3c.4-.4.4-1 0-1.4L13.4 12z')
+  await expect(clearIcon.locator('path')).toHaveAttribute(
+    'd',
+    'm13.4 12 6.3-6.3c.4-.4.4-1 0-1.4-.4-.4-1-.4-1.4 0L12 10.6 5.7 4.3c-.4-.4-1-.4-1.4 0-.4.4-.4 1 0 1.4l6.3 6.3-6.3 6.3c-.4.4-.4 1 0 1.4.2.2.4.3.7.3.3 0 .5-.1.7-.3l6.3-6.3 6.3 6.3c.2.2.4.3.7.3s.5-.1.7-.3c.4-.4.4-1 0-1.4L13.4 12z'
+  )

  // 测试清除功能
  await expect(datePickerCustomClearIcon).toHaveValue('2023-05-24')
  await page.locator('.tiny-input__icon-container > svg > .st0').click()
-  await expect(datePickerCustomClearIcon).not.toBeVisible()
+  await expect(datePickerCustomClearIcon).toHaveValue('')
 })
--- a/examples/sites/demos/pc/app/date-picker/date-range.spec.ts
+++ b/examples/sites/demos/pc/app/date-picker/date-range.spec.ts
@ -34,9 +34,14 @@ test('测试日期范围选择', async ({ page }) => {
  await page.locator('li:nth-child(2) > span').first().click()
  await page.getByRole('button', { name: '确定' }).first().click()
  await page.getByRole('textbox', { name: '结束时间' }).click()
-  await page.locator('span:nth-child(3) > span:nth-child(2) > .tiny-time-panel > .tiny-time-panel__content > .tiny-time-spinner > div > .tiny-scrollbar__wrap > .tiny-scrollbar__view > li:nth-child(3) > span').first().click()
+  await page
+    .locator(
+      'span:nth-child(3) > span:nth-child(2) > .tiny-time-panel > .tiny-time-panel__content > .tiny-time-spinner > div > .tiny-scrollbar__wrap > .tiny-scrollbar__view > li:nth-child(3) > span'
+    )
+    .first()
+    .click()
  await page.getByRole('button', { name: '确定' }).first().click()
-  await page.getByRole('button', { name: '确定' }).click()
+  await page.locator('.tiny-picker-panel__footer').getByRole('button', { name: '确定' }).click()
  await expect(startDateTime).toHaveValue('2023-06-04 01:00:00')
  await expect(endDateTime).toHaveValue('2023-07-10 02:00:00')

--- a/examples/sites/demos/pc/app/date-picker/events.spec.ts
+++ b/examples/sites/demos/pc/app/date-picker/events.spec.ts
@ -14,7 +14,11 @@ test('[DatePicker] 测试事件', async ({ page }) => {
  await dateInputBlur.fill('2023-05-20')
  await dateInputBlur.press('Enter')

-  await page.getByRole('textbox', { name: '2023-05-20' }).click()
+  await page
+    .locator('div')
+    .filter({ hasText: /^blur:$/ })
+    .getByRole('textbox')
+    .click()
  await page.getByRole('cell', { name: '15' }).getByText('15').click()
  const blurEventMessageDom = page.locator('div').filter({ hasText: '触发 blur 事件' }).nth(1)
  await expect(blurEventMessageDom).toBeVisible()
@ -24,13 +28,17 @@ test('[DatePicker] 测试事件', async ({ page }) => {
  await dateInputChange.fill('2023-05-20')
  await dateInputChange.press('Enter')

-  await page.getByRole('textbox', { name: '2023-05-20' }).click()
+  await page
+    .locator('div')
+    .filter({ hasText: /^change:$/ })
+    .getByRole('textbox')
+    .click()
  await page.getByRole('cell', { name: '15' }).getByText('15').click()
  const changeEventMessageDom = page.locator('div').filter({ hasText: '触发 change 事件，组件绑定值为：' }).nth(1)
  await expect(changeEventMessageDom).toBeVisible()

  // onPick 事件
-  await page.locator('#events').getByRole('textbox').nth(3).click()
+  await page.locator('div').filter({ hasText: /^-$/ }).click()
  await page.getByRole('cell', { name: '10' }).getByText('10').first().click()
  const onPickEventMessageDom = page.locator('div').filter({ hasText: '触发 onPick 事件，开始日期为：' }).nth(1)
  await expect(onPickEventMessageDom).toBeVisible()
--- a/examples/sites/demos/pc/app/date-picker/format.spec.ts
+++ b/examples/sites/demos/pc/app/date-picker/format.spec.ts
@ -10,10 +10,10 @@ test('[DatePicker] 测试日期格式化', async ({ page }) => {
  await expect(page.getByRole('textbox', { name: '2023 年 05 月 20 日' }).first()).toBeVisible()

  // time-format: 时间输入框中显示的格式
-  await page.getByRole('textbox', { name: '2023 年 05 月 20 日 00 时 00 分 00 秒' }).click()
+  await page.locator('.tiny-date-editor input').nth(1).click()
  await page.getByRole('row', { name: '21 22 23 24 25 26 27' }).getByText('24').click()
  await page.getByRole('button', { name: '确定' }).click()
-  await expect(page.getByRole('textbox', { name: '2023 年 05 月 24 日 00 时 00 分 00 秒' })).toBeVisible()
+  await expect(page.locator('.tiny-date-editor input').nth(1)).toHaveValue('2023 年 05 月 24 日 08 时 00 分 00 秒')

  // value-format: 选中值的格式
  await page.locator('.tiny-date-editor input').nth(2).click()
--- a/examples/sites/demos/pc/app/date-picker/shortcuts.spec.ts
+++ b/examples/sites/demos/pc/app/date-picker/shortcuts.spec.ts
@ -7,11 +7,10 @@ test('[DatePicker] 测试选择快捷选项日期：今天/昨天/一周前', as
  // 日期选择：今天/昨天/一周前
  const datePickerDom = page.getByRole('textbox', { name: '请选择日期' })
  await datePickerDom.click()
-  await expect(datePickerDom).toBeVisible()
  await page.getByRole('button', { name: '今天' }).click()
  await page.locator('.tiny-date-editor input').first().click()
  await page.getByRole('button', { name: '昨天' }).click()
  await page.locator('.tiny-date-editor input').first().click()
  await page.getByRole('button', { name: '一周前' }).click()
-  await expect(datePickerDom).not.toBeVisible()
+  await expect(datePickerDom).not.toHaveValue('')
 })
--- a/packages/renderless/src/picker/index.ts
+++ b/packages/renderless/src/picker/index.ts
@ -528,16 +528,18 @@ export const handleChange =
    }
  }

-export const handleStartInput = (state, props, api) => (event) => {
-  const value = props.autoFormat
-    ? api.formatInputValue({ event, prevValue: state.displayValue[0] })
-    : event.target.value
-  if (state.userInput) {
-    state.userInput = [value, state.userInput[1]]
-  } else {
-    state.userInput = [value, null]
+export const handleStartInput =
+  ({ state, props, api }) =>
+  (event) => {
+    const value = props.autoFormat
+      ? api.formatInputValue({ event, prevValue: state.displayValue[0] })
+      : event.target.value
+    if (state.userInput) {
+      state.userInput = [value, state.userInput[1]]
+    } else {
+      state.userInput = [value, null]
+    }
  }
-}

 export const handleEndInput =
  ({ state, props, api }) =>
@ -1252,13 +1254,15 @@ const moveStart = (inputElem, moveStartIndex) => {
  }
 }

+// 这个是 input 组件的 input 事件，应该只有一个 event 参数，input 组件的具体值从 event.target.value 中获取。
 export const handleInput =
  ({ state, props, api }) =>
-  (val, event) => {
+  (event) => {
    if (props.autoFormat) {
      const value = api.formatInputValue({ event, prevValue: state.displayValue })
      state.userInput = value
    } else {
+      const val = event.target.value
      state.userInput = val
    }
  }