diff --git a/web/pgadmin/static/js/slickgrid/editors.js b/web/pgadmin/static/js/slickgrid/editors.js
index 2325149b..22bd86ba 100644
--- a/web/pgadmin/static/js/slickgrid/editors.js
+++ b/web/pgadmin/static/js/slickgrid/editors.js
@@ -886,27 +886,35 @@ import gettext from 'sources/gettext';
// Custom checkbox editor, We need it for runtime as it does not render
// indeterminate checkbox state
function pgCheckboxEditor(args) {
- var $select, el;
+ var $select;
var defaultValue, previousState;
this.init = function() {
- $select = $('
');
+ $select = $('
');
$select.appendTo(args.container);
$select.trigger('focus');
- // The following code is taken from https://css-tricks.com/indeterminate-checkboxes/
- $select.on('click', function() {
- el = $(this);
- var states = ['unchecked', 'partial', 'checked'];
- var curState = el.find('.check').data('state');
- curState++;
- el.find('.check')
- .removeClass('unchecked partial checked')
- .addClass(states[curState % states.length])
- .data('state', curState % states.length);
+ $select.on('click', this.changeValue);
+
+ $select.on('keydown', (e) => {
+ if (e.which == $.ui.keyCode.SPACE) {
+ e.preventDefault();
+ this.changeValue(e);
+ }
});
};
+ this.changeValue = function() {
+ // The following code is taken from https://css-tricks.com/indeterminate-checkboxes/
+ var states = ['unchecked', 'partial', 'checked'];
+ var curState = $select.find('.check').data('state') || 0;
+ curState++;
+ $select.find('.check')
+ .removeClass('unchecked partial checked')
+ .addClass(states[curState % states.length])
+ .data('state', curState % states.length);
+ };
+
this.destroy = function() {
$select.remove();
};