Hi,
Please find attached patch to fix dialog tab navigation in backup and
restore dialog.
Note: If first control in dialog is bootstrap switch then tab and dialog
tab navigation do not work.
This is because bootstrap switch captures all keyboard events and it does
not allow them to propagate /bubble up.
As Khushboo is working on new switch control (RM 3051
<https://redmine.postgresql.org/issues/3051>) I haven't fix this issue as a
part of this patch.
--
*Harshal Dhumal*
*Sr. Software Engineer*
EnterpriseDB India: http://www.enterprisedb.com
The Enterprise PostgreSQL Company
On Tue, Jan 22, 2019 at 4:29 PM Akshay Joshi <akshay.jo...@enterprisedb.com>
wrote:
> Thanks patch applied.
>
> On Tue, Jan 22, 2019 at 2:51 PM Khushboo Vashi <
> khushboo.va...@enterprisedb.com> wrote:
>
>> The patch looks good to me.
>>
>> On Mon, Jan 21, 2019 at 4:39 PM Akshay Joshi <
>> akshay.jo...@enterprisedb.com> wrote:
>>
>>> Hi Khushboo
>>>
>>> Can you please review it.
>>>
>>> On Wed, Jan 16, 2019 at 12:55 PM Harshal Dhumal <
>>> harshal.dhu...@enterprisedb.com> wrote:
>>>
>>>> Hi,
>>>>
>>>> Please find attached updated patch.
>>>> In this patch I have fixed two issues:
>>>> i. Dialog tab navigation should work even if focus is on footer buttons
>>>> (Save, Cancel, etc..)
>>>> ii. Focus should be set to first editable element of dialog when tab
>>>> cycle goes through all editable footer buttons.
>>>>
>>>>
>>>> --
>>>> *Harshal Dhumal*
>>>> *Sr. Software Engineer*
>>>>
>>>> EnterpriseDB India: http://www.enterprisedb.com
>>>> The Enterprise PostgreSQL Company
>>>>
>>>>
>>>> On Thu, Jan 10, 2019 at 1:16 PM Harshal Dhumal <
>>>> harshal.dhu...@enterprisedb.com> wrote:
>>>>
>>>>> Hi,
>>>>> This patch fixes Dialog tabset keyboard navigation.
>>>>> This regression was caused due to bootstrap 4 changes.
>>>>> Also I have added jasmine test cases for the same
>>>>>
>>>>>
>>>>> --
>>>>> *Harshal Dhumal*
>>>>> *Sr. Software Engineer*
>>>>>
>>>>> EnterpriseDB India: http://www.enterprisedb.com
>>>>> The Enterprise PostgreSQL Company
>>>>>
>>>>
>>>
>>> --
>>> *Akshay Joshi*
>>>
>>> *Sr. Software Architect *
>>>
>>>
>>>
>>> *Phone: +91 20-3058-9517Mobile: +91 976-788-8246*
>>>
>>
>
> --
> *Akshay Joshi*
>
> *Sr. Software Architect *
>
>
>
> *Phone: +91 20-3058-9517Mobile: +91 976-788-8246*
>
diff --git a/web/pgadmin/static/js/alertify/dialog_wrapper.js b/web/pgadmin/static/js/alertify/dialog_wrapper.js
index 75452f2..7766380 100644
--- a/web/pgadmin/static/js/alertify/dialog_wrapper.js
+++ b/web/pgadmin/static/js/alertify/dialog_wrapper.js
@@ -8,6 +8,7 @@
//////////////////////////////////////////////////////////////
import * as commonUtils from '../utils';
+import $ from 'jquery';
export class DialogWrapper {
constructor(
@@ -53,11 +54,20 @@ export class DialogWrapper {
return undefined;
}
- focusOnDialog(dialog) {
- dialog.$el.attr('tabindex', -1);
- this.pgBrowser.keyboardNavigation.getDialogTabNavigator(dialog);
- const container = dialog.$el.find('.tab-content:first > .tab-pane.active:first');
+ focusOnDialog(alertifyDialog) {
+ let backform_tab = $(alertifyDialog.elements.body).find('.backform-tab');
+ backform_tab.attr('tabindex', -1);
+ this.pgBrowser.keyboardNavigation.getDialogTabNavigator($(alertifyDialog.elements.dialog));
+ const container = backform_tab.find('.tab-content:first > .tab-pane.active:first');
commonUtils.findAndSetFocus(container);
+
+ $(alertifyDialog.elements.footer).on('keydown', 'button', function(event) {
+ if (event.keyCode == 9 && $(this).nextAll('button:not([disabled])').length == 0) {
+ // set focus back to first editable input element of current active tab once we cycle through all enabled buttons.
+ commonUtils.findAndSetFocus($(alertifyDialog.elements.body).find('.tab-content div.active'));
+ return false;
+ }
+ });
}
isNodeSelected(selectedTreeNode) {
diff --git a/web/pgadmin/static/js/utils.js b/web/pgadmin/static/js/utils.js
index 86727a1..27b999f 100644
--- a/web/pgadmin/static/js/utils.js
+++ b/web/pgadmin/static/js/utils.js
@@ -28,7 +28,7 @@ export function findAndSetFocus(container) {
if (first_el.length == 0) {
first_el = container
- .find('.pgadmin-controls:first>input:enabled,.CodeMirror-scroll');
+ .find('.pgadmin-controls:first input:enabled,.CodeMirror-scroll');
}
if(first_el.length > 0) {
diff --git a/web/pgadmin/tools/backup/static/js/backup_dialog_wrapper.js b/web/pgadmin/tools/backup/static/js/backup_dialog_wrapper.js
index 931d0a0..a9a01e5 100644
--- a/web/pgadmin/tools/backup/static/js/backup_dialog_wrapper.js
+++ b/web/pgadmin/tools/backup/static/js/backup_dialog_wrapper.js
@@ -99,7 +99,7 @@ export class BackupDialogWrapper extends DialogWrapper {
this.elements.content.appendChild($container.get(0));
- this.focusOnDialog(dialog);
+ this.focusOnDialog(this);
this.setListenersForFilenameChanges();
}
diff --git a/web/pgadmin/tools/restore/static/js/restore_dialog_wrapper.js b/web/pgadmin/tools/restore/static/js/restore_dialog_wrapper.js
index 0d211ae..aba3048 100644
--- a/web/pgadmin/tools/restore/static/js/restore_dialog_wrapper.js
+++ b/web/pgadmin/tools/restore/static/js/restore_dialog_wrapper.js
@@ -99,7 +99,7 @@ export class RestoreDialogWrapper extends DialogWrapper {
this.elements.content.appendChild($container.get(0));
- this.focusOnDialog(dialog);
+ this.focusOnDialog(this);
this.setListenersForFilenameChanges();
}
