Custom checkbox does not toggle with the space/enter

Tags: #<Tag:0x00007efc61c88110>
#1

Context: When I use “checkbox” as columns type I can use space to toggle On/Off the checkbox, but if I use my custom function it doesn’t work even if it points to the same function.

// PXDataviewerConfiguration
function PXDataviewerConfiguration(){
  columnTypes: {
    ...
    checkbox: ['PXCheckbox'],
    ...
  },
  fieldType: {
    ...
    checkbox: function() {
      return {
        type: 'PXCheckbox',  -> If I move it back to 'checkbox' it works with space/enter.
        checkedTemplate: 1,
        uncheckedTemplate: 0
      };
    },
    ...
  }
};

In the PXCheckbox I did point it to the original one for testing and the space/enter doesn’t work even if they point to the original checkbox (editor/renderer).

// HandsontableCellTypes services
Handsontable.cellTypes.registerCellType('PXCheckbox',{
  editor   : Handsontable.editors.CheckboxEditor,
  renderer : Handsontable.renderers.CheckboxRenderer,
});

If we look at the Handsontable code we see that Checkbox cell type also only contain editor / renderer (no extra validation)

// Handsontable core code
Handsontable.CheckboxCell = {
  editor: getEditorConstructor('checkbox'),
  renderer: getRenderer('checkbox')
};

The setup does work since I can click/use them and they do render, just not Space toggle them.

What I understood is that even if we extend the function or even use the direct reference Handsontable.renderers.CheckboxRenderer the following Hook never get trigger.

 // Handsontable core code CheckboxRenderer function
 if (!isListeningKeyDownEvent.has(instance)) {
    isListeningKeyDownEvent.set(instance, true);
    instance.addHook('beforeKeyDown', onBeforeKeyDown);
  }
 function onBeforeKeyDown(event) {
  var toggleKeys = 'SPACE|ENTER';
  var switchOffKeys = 'DELETE|BACKSPACE';

Why does a custom checkbox that point to the same renderer does not work like the default one? Anything obvious I missed?

Thanks
Mathieu

#2

Hi @mathieu.legault

Can you point me out where is the difference between a custom renderer and the default? I’ve created a demo at http://jsfiddle.net/handsoncode/b0n1h0an/ but it seems to work fine with the custom renderer

#3

Hi Aleksandra,
I did modify your JsFiddle here to have a new cell as “PXCheckbox”, but even if I try to have the PXCheckbox behave like a checkbox inside the columns type it does not seems to works and cannot use Space to swap the value.

    columnTypes: {
      checkbox: ['PXCheckbox'],
      },

From my understanding, it is the Handsontable.renderers.CheckboxRenderer that add the event listener on the onBeforeKeyDown for the Space/Enter Toggle.

What am I missing to use custom checkbox behave like the default one on Space/Enter?
Thanks

#4

Thank you. Like I thought, I misunderstood the case.
Now it is clear.

The validator is not a part of the checkbox cell type we only have a renderer and an editor. It looks like a bug for me. The following code

  Handsontable.cellTypes.registerCellType('PXCheckbox', {
    editor: Handsontable.editors.CheckboxEditor,
    renderer: Handsontable.renderers.CheckboxRenderer, // Or chck do the same. I cannot use Space to trigger a cell switch.
  });

should do the same as using the predefined checkbox cell type.

#5

I will ask our developer to check that behavior.
He will be able to check that next week.

As I soon as I get an update I’m back to you with the news.

Using space shortcut to check a custom rendered checkbox
#6

Hi @mathieu.legault

I got news!

Here’s a demo from our developer https://jsfiddle.net/oskfmjkd/

He told me that the changeSelectedCheckboxesState in the checkboxRenederer.js checks cellProperties.type !== 'checkbox' and if it not a checkbox it doesn’t work for Space, Enter, Del or Backspace

#7