pgadmin-org
/
pgadmin4
mirror of https://github.com/pgadmin-org/pgadmin4.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix tab focus issue when closing query tool using keyboard shortcut. #6572

pull/7687/head
Aditya Toshniwal 2024-07-23 17:02:39 +05:30
parent 18d507780d
commit 026292f07b
1 changed files with 11 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
web/pgadmin/browser/static/js/keyboard.js
View File

@ -150,12 +150,12 @@ _.extend(pgBrowser.keyboardNavigation, {
const self = this; const self = this;
const shortcutObj = this.keyboardShortcut; const shortcutObj = this.keyboardShortcut;
const activeElement = document.activeElement; const activeElement = document.activeElement;
if (activeElement.closest('.dock-tab-btn')) { if (activeElement.closest('.dock-tab-btn')) {
const currDockTab = activeElement.closest('.dock-tab-btn'); const currDockTab = activeElement.closest('.dock-tab-btn');
const dockLayout = currDockTab.closest('.dock-layout'); const dockLayout = currDockTab.closest('.dock-layout');
const dockLayoutTabs = dockLayout ? Array.from(dockLayout.querySelectorAll('.dock-tab-btn')) : null; const dockLayoutTabs = dockLayout ? Array.from(dockLayout.querySelectorAll('.dock-tab-btn')) : null;
if (dockLayoutTabs && dockLayoutTabs.length > 1) { if (dockLayoutTabs && dockLayoutTabs.length > 1) {
const activeTabIndex = dockLayoutTabs.indexOf(currDockTab); const activeTabIndex = dockLayoutTabs.indexOf(currDockTab);
self._focusTab(dockLayoutTabs, activeTabIndex, shortcutObj, combo); self._focusTab(dockLayoutTabs, activeTabIndex, shortcutObj, combo);
@ -166,7 +166,7 @@ _.extend(pgBrowser.keyboardNavigation, {
activeTabId = (activeElement.nodeName === 'IFRAME') ? activeElement.id : activeElement.closest('.dock-tabpane.dock-tabpane-active').id; activeTabId = (activeElement.nodeName === 'IFRAME') ? activeElement.id : activeElement.closest('.dock-tabpane.dock-tabpane-active').id;
const dockLayout = document.getElementById('root'); const dockLayout = document.getElementById('root');
const dockLayoutTabs = dockLayout ? Array.from(dockLayout.querySelectorAll('.dock-tab-btn')) : null; const dockLayoutTabs = dockLayout ? Array.from(dockLayout.querySelectorAll('.dock-tab-btn')) : null;
if (dockLayoutTabs && dockLayoutTabs.length > 1 && activeTabId) { if (dockLayoutTabs && dockLayoutTabs.length > 1 && activeTabId) {
const activeTabIndex = dockLayoutTabs.findIndex(tab => tab.id.slice(14) === activeTabId); const activeTabIndex = dockLayoutTabs.findIndex(tab => tab.id.slice(14) === activeTabId);
self._focusTab(dockLayoutTabs, activeTabIndex, shortcutObj, combo); self._focusTab(dockLayoutTabs, activeTabIndex, shortcutObj, combo);
@ -174,12 +174,12 @@ _.extend(pgBrowser.keyboardNavigation, {
} }
else if (activeElement === document.body || document.querySelector('div[data-test="app-menu-bar"]')) { else if (activeElement === document.body || document.querySelector('div[data-test="app-menu-bar"]')) {
const activeTabs = document.getElementsByClassName('dock-tabpane dock-tabpane-active'); const activeTabs = document.getElementsByClassName('dock-tabpane dock-tabpane-active');
if (activeTabs.length > 1) { if (activeTabs.length > 1) {
const activeTabId = activeTabs[1].id; const activeTabId = activeTabs[1].id;
const dockLayout = document.getElementById('root'); const dockLayout = document.getElementById('root');
const dockLayoutTabs = dockLayout ? Array.from(dockLayout.querySelectorAll('.dock-tab-btn')) : null; const dockLayoutTabs = dockLayout ? Array.from(dockLayout.querySelectorAll('.dock-tab-btn')) : null;
if (dockLayoutTabs && dockLayoutTabs.length > 1 && activeTabId) { if (dockLayoutTabs && dockLayoutTabs.length > 1 && activeTabId) {
const activeTabIndex = dockLayoutTabs.findIndex(tab => tab.id.slice(14) === activeTabId); const activeTabIndex = dockLayoutTabs.findIndex(tab => tab.id.slice(14) === activeTabId);
self._focusTab(dockLayoutTabs, activeTabIndex, shortcutObj, combo); self._focusTab(dockLayoutTabs, activeTabIndex, shortcutObj, combo);
@ -188,17 +188,17 @@ _.extend(pgBrowser.keyboardNavigation, {
} }
}, },
_focusTab: function(dockLayoutTabs, activeTabIdx, shortcut_obj, combo){ _focusTab: function(dockLayoutTabs, activeTabIdx, shortcut_obj, combo){
if (combo.key === shortcut_obj.tabbed_panel_backward) activeTabIdx = (activeTabIdx + dockLayoutTabs.length - 1) % dockLayoutTabs.length; if(combo.key === shortcut_obj.close_tab_panel) {
else if (combo.key === shortcut_obj.tabbed_panel_forward) activeTabIdx = (activeTabIdx + 1) % dockLayoutTabs.length;
else if (combo.key === shortcut_obj.close_tab_panel) {
const panelId = dockLayoutTabs[activeTabIdx].id?.slice(14); const panelId = dockLayoutTabs[activeTabIdx].id?.slice(14);
if (panelId) { if (panelId) {
pgAdmin.Browser.docker.close(panelId); pgAdmin.Browser.docker.close(panelId);
activeTabIdx = activeTabIdx === dockLayoutTabs.length - 1 || activeTabIdx === 0 ? 1 : activeTabIdx + 1;
} }
} else {
if (combo.key === shortcut_obj.tabbed_panel_backward) activeTabIdx = (activeTabIdx + dockLayoutTabs.length - 1) % dockLayoutTabs.length;
else if (combo.key === shortcut_obj.tabbed_panel_forward) activeTabIdx = (activeTabIdx + 1) % dockLayoutTabs.length;
dockLayoutTabs[activeTabIdx]?.click();
dockLayoutTabs[activeTabIdx]?.focus();
} }
dockLayoutTabs[activeTabIdx]?.click();
dockLayoutTabs[activeTabIdx]?.focus();
}, },
bindLeftTree: function() { bindLeftTree: function() {
const tree = this.getTreeDetails(); const tree = this.getTreeDetails();