fix(components): [el-date-picker] panel position error after view switch (#5277)

* fix(components): [el-date-picker] panel position error after view switch

* fix: [el-popper] zIndex not update issue

packages/components/date-picker/src/date-picker-com/panel-date-pick.vue

@@ -182,6 +182,7 @@ import {
   DArrowRight,
   ArrowRight,
 } from '@element-plus/icons-vue'
+import { TOOLTIP_INJECTION_KEY } from '@element-plus/components/tooltip'
 import DateTable from './basic-date-table.vue'
 import MonthTable from './basic-month-table.vue'
 import YearTable from './basic-year-table.vue'
@@ -232,7 +233,7 @@ export default defineComponent({
   setup(props, ctx) {
     const { t, lang } = useLocale()
     const pickerBase = inject('EP_PICKER_BASE') as any
-
+    const popper = inject(TOOLTIP_INJECTION_KEY)
     const {
       shortcuts,
       disabledDate,
@@ -385,6 +386,13 @@ export default defineComponent({
       { immediate: true }
     )
 
+    watch(
+      () => currentView.value,
+      () => {
+        popper?.updatePopper()
+      }
+    )
+
     const hasShortcuts = computed(() => !!shortcuts.length)
 
     const handleMonthPick = (month) => {

packages/components/popper/src/content.vue

@@ -44,9 +44,7 @@ export default defineComponent({
       arrowRef,
       arrowOffset,
     })
-    const contentZIndex = computed(
-      () => props.zIndex || PopupManager.nextZIndex()
-    )
+    const contentZIndex = ref(props.zIndex || PopupManager.nextZIndex())
 
     const contentStyle = computed(
       () => [{ zIndex: unref(contentZIndex) }, props.popperStyle] as any
@@ -76,6 +74,7 @@ export default defineComponent({
 
     const updatePopper = () => {
       unref(popperInstanceRef)?.update()
+      contentZIndex.value = props.zIndex || PopupManager.nextZIndex()
     }
 
     onMounted(() => {

packages/components/tooltip/index.ts

@@ -3,4 +3,5 @@ import Tooltip from './src/tooltip.vue'
 
 export const ElTooltip = withInstall(Tooltip)
 export * from './src/tooltip'
+export * from './src/tokens'
 export default ElTooltip

packages/components/tooltip/src/tokens.ts

@@ -11,6 +11,7 @@ export type ElTooltipInjectionContext = {
   onToggle: (e: Event) => void
   onShow: () => void
   onHide: () => void
+  updatePopper: () => void
 }
 
 export const TOOLTIP_INJECTION_KEY: InjectionKey<ElTooltipInjectionContext> =

packages/components/tooltip/src/tooltip.vue

@@ -159,6 +159,7 @@ export default defineComponent({
       onHide: () => {
         emit('hide')
       },
+      updatePopper,
     })
 
     return {