fix(nc-gui): query the active date picker only

packages/nc-gui/components/cell/DatePicker.vue

@@ -85,7 +85,7 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
         open.value = true
       } else {
         // select the current day
-        const el = document.querySelector('.ant-picker-cell-selected') as HTMLButtonElement
+        const el = document.querySelector('.nc-picker-date.active .ant-picker-cell-selected') as HTMLButtonElement
         if (el) {
           el.click()
           open.value = false
@@ -104,53 +104,57 @@ useSelectedCellKeyupListener(active, (e: KeyboardEvent) => {
       break
     case 'ArrowLeft':
       if (!localState) {
-        ;(document.querySelector('.ant-picker-header-prev-btn') as HTMLButtonElement)?.click()
+        ;(document.querySelector('.nc-picker-date.active .ant-picker-header-prev-btn') as HTMLButtonElement)?.click()
       } else {
-        const prevEl = document.querySelector('.ant-picker-cell-selected')?.previousElementSibling as HTMLButtonElement
+        const prevEl = document.querySelector('.nc-picker-date.active .ant-picker-cell-selected')
+          ?.previousElementSibling as HTMLButtonElement
         if (prevEl) {
           prevEl.click()
         } else {
           // get the last td from previous tr
           const prevRowLastEl = document
-            .querySelector('.ant-picker-cell-selected')
+            .querySelector('.nc-picker-date.active .ant-picker-cell-selected')
             ?.closest('tr')
             ?.previousElementSibling?.querySelector('td:last-child') as HTMLButtonElement
           if (prevRowLastEl) {
             prevRowLastEl.click()
           } else {
             // go to the previous month
-            ;(document.querySelector('.ant-picker-header-prev-btn') as HTMLButtonElement)?.click()
+            ;(document.querySelector('.nc-picker-date.active .ant-picker-header-prev-btn') as HTMLButtonElement)?.click()
           }
         }
       }
       break
     case 'ArrowRight':
       if (!localState) {
-        ;(document.querySelector('.ant-picker-header-next-btn') as HTMLButtonElement)?.click()
+        ;(document.querySelector('.nc-picker-date.active .ant-picker-header-next-btn') as HTMLButtonElement)?.click()
       } else {
-        const nextEl = document.querySelector('.ant-picker-cell-selected')?.nextElementSibling as HTMLButtonElement
+        const nextEl = document.querySelector('.nc-picker-date.active .ant-picker-cell-selected')
+          ?.nextElementSibling as HTMLButtonElement
         if (nextEl) {
           nextEl.click()
         } else {
           // get the last td from previous tr
           const nextRowFirstEl = document
-            .querySelector('.ant-picker-cell-selected')
+            .querySelector('.nc-picker-date.active .ant-picker-cell-selected')
             ?.closest('tr')
             ?.nextElementSibling?.querySelector('td:first-child') as HTMLButtonElement
           if (nextRowFirstEl) {
             nextRowFirstEl.click()
           } else {
             // go to the next month
-            ;(document.querySelector('.ant-picker-header-next-btn') as HTMLButtonElement)?.click()
+            ;(document.querySelector('.nc-picker-date.active .ant-picker-header-next-btn') as HTMLButtonElement)?.click()
           }
         }
       }
       break
     case 'ArrowUp':
-      if (!localState) (document.querySelector('.ant-picker-header-super-prev-btn') as HTMLButtonElement)?.click()
+      if (!localState)
+        (document.querySelector('.nc-picker-date.active .ant-picker-header-super-prev-btn') as HTMLButtonElement)?.click()
       break
     case 'ArrowDown':
-      if (!localState) (document.querySelector('.ant-picker-header-super-next-btn') as HTMLButtonElement)?.click()
+      if (!localState)
+        (document.querySelector('.nc-picker-date.active .ant-picker-header-super-next-btn') as HTMLButtonElement)?.click()
       break
     case ';':
       localState = dayjs(new Date())