fix(time-picker): fix/date-time-picker-positioning-issue (#1980)

* fix(time-picker): fix/date-time-picker-positioning-issue

- Make time-picker accepting popper-options injection

* update the providing strategy

packages/time-picker/__tests__/time-picker.spec.ts

@@ -1,6 +1,7 @@
 import { mount } from '@vue/test-utils'
 import { nextTick } from 'vue'
 import TimePicker from '../src/time-picker'
+import Picker from '../src/common/picker.vue'
 import { triggerEvent } from '@element-plus/test-utils'
 import dayjs from 'dayjs'
 
@@ -427,5 +428,31 @@ describe('TimePicker(range)', () => {
     expect(dayjs(initValue).diff(addOneHour, 'minute')).toEqual(-60)
     expect(dayjs(initValue).diff(addOneHourOneMinute, 'minute')).toEqual(-61)
   })
+
+  it('should be able to inherit options from parent injection', async () => {
+    const ElPopperOptions = {
+      strategy: 'fixed',
+    }
+    const wrapper = _mount(
+      `<el-time-picker
+        v-model="value"
+        format="YYYY-MM-DD HH:mm:ss"
+        :popper-options="options"
+      />`, () => ({ value: new Date(2016, 9, 10, 18, 40), options: ElPopperOptions }),
+      {
+        provide() {
+          return {
+            ElPopperOptions,
+          }
+        },
+      },
+    )
+
+    await nextTick()
+
+    expect((
+      (wrapper.findComponent(Picker).vm as any).elPopperOptions),
+    ).toEqual(ElPopperOptions)
+  })
 })
 

packages/time-picker/src/common/picker.vue

@@ -8,6 +8,7 @@
     trigger="click"
     v-bind="$attrs"
     :popper-class="`el-picker__popper ${popperClass}`"
+    :popper-options="elPopperOptions"
     transition="el-zoom-in-top"
     :gpu-acceleration="false"
     :stop-popper-mouse-event="false"
@@ -192,6 +193,7 @@ export default defineComponent({
 
     const elForm = inject(elFormKey, {} as ElFormContext)
     const elFormItem = inject(elFormItemKey, {} as ElFormItemContext)
+    const elPopperOptions = inject('ElPopperOptions', {})
 
     const refPopper = ref(null)
     const pickerVisible = ref(false)
@@ -496,6 +498,9 @@ export default defineComponent({
       props,
     })
     return {
+      // injected popper options
+      elPopperOptions,
+
       isDatesPicker,
       handleEndChange,
       handleStartChange,

packages/time-picker/src/common/props.ts

@@ -1,5 +1,6 @@
-import type { PropType } from 'vue'
 import { isValidComponentSize } from '@element-plus/utils/validators'
+import type { PropType } from 'vue'
+import type { Options } from '@popperjs/core'
 export const defaultProps = {
   name: {
     type: [Array, String],
@@ -48,6 +49,10 @@ export const defaultProps = {
     type: String,
     default: '',
   },
+  popperOptions: {
+    type: Object as PropType<Options>,
+    default: () => ({}),
+  },
   modelValue: {
     type: [Date, Array, String] as PropType<string | Date | Date[]>,
     default: '',

packages/time-picker/src/time-picker.ts

@@ -1,4 +1,4 @@
-import { defineComponent, h, ref } from 'vue'
+import { defineComponent, h, ref, provide } from 'vue'
 import dayjs from 'dayjs'
 import customParseFormat from 'dayjs/plugin/customParseFormat'
 import { DEFAULT_FORMATS_TIME } from './common/constant'
@@ -29,6 +29,8 @@ export default defineComponent({
         commonPicker.value?.handleFocus()
       },
     }
+
+    provide('ElPopperOptions', props.popperOptions)
     ctx.expose(refProps)
     return () => h(Picker, {
       format: DEFAULT_FORMATS_TIME,

packages/utils/constants.ts

@@ -8,4 +8,3 @@ export const VALIDATE_STATE_MAP = {
   success: 'el-icon-circle-check',
   error: 'el-icon-circle-close',
 }
-

website/docs/es/drawer.md

@@ -262,6 +262,7 @@ El Drawer proporciona una API llamada "destroyOnClose", que es una variable de b
 
 :::
 
+
 ### Atributos de Drawer
 
 | Parámetros | Descripción | Tipo   | Valores aceptados           | Por defecto |

website/docs/fr-FR/drawer.md

@@ -261,6 +261,7 @@ Drawer provides an API called `destroyOnClose`, which is a flag variable that in
 
 :::
 
+
 ### Drawer Attributes
 
 | Parameter| Description | Type      | Acceptable Values                           | Defaults  |

website/docs/jp/drawer.md

@@ -262,6 +262,7 @@ Drawerは `destroyOnClose` というAPIを提供しています。これはフ
 
 :::
 
+
 ### Drawer属性
 
 | Parameter| Description | Type      | Acceptable Values                           | Defaults  |

website/docs/zh-CN/drawer.md

@@ -261,8 +261,6 @@ Drawer 的内容是懒渲染的，即在第一次被打开之前，传入的默
 
 Drawer 提供一个 `destroyOnClose` API, 用来在关闭 Drawer 时销毁子组件内容, 例如清理表单内的状态, 在必要时可以将该属性设置为 **true** 用来保证初始状态的一致性
 
-:::
-
 ### Drawer Attributes
 Drawer has almost identical attributes as Dialog.