diff --git a/docs/en_US/release_notes_4_13.rst b/docs/en_US/release_notes_4_13.rst index 112d182fb..bbc94bcfb 100644 --- a/docs/en_US/release_notes_4_13.rst +++ b/docs/en_US/release_notes_4_13.rst @@ -23,7 +23,9 @@ Bug fixes | `Issue #2706 `_ - Added ProjectSet icon for explain module. | `Issue #2828 `_ - Added Gather Merge, Named Tuple Store Scan and Table Function Scan icon for explain module. +| `Issue #3778 `_ - Ensure Boolean columns should be editable using keyboard keys. | `Issue #4419 `_ - Fix a debugger error when using Python 2.7. +| `Issue #4487 `_ - Ensure Boolean columns should be editable in View/Edit data and Query Tool. | `Issue #4577 `_ - Fix an error that could be seen when click on any system column of a table. | `Issue #4584 `_ - Unescape HTML entities in database names in the Query Tool title bar. | `Issue #4643 `_ - Fix Truncate option deselect issue for compound triggers. diff --git a/web/pgadmin/static/js/slickgrid/editors.js b/web/pgadmin/static/js/slickgrid/editors.js index 2325149b7..22bd86bae 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(); };