Custom Renderer Doesn't Allow me to Select Cell Element

Tags: #<Tag:0x00007f4527057f58>

I am using custom renderer to populate columns with dropdown and input fields. However, I can’t select that element. I can’t select dropdown value, neither can I enter text in input field. The selection is removed from that element immediately after click, it doesn’t stays selected.

Hi @zabeehmayar18

If you could share some code samples of your custom renderer it would be great. However, for start you can try to comment out the whole renderer section and see if that helps.

Handsontable.renderers.registerRenderer(“DictDesRenderer”, (hotInstance, TD, …rest) => {
let data = props.data[0][0];

  if (TD.children.length === 0) {
    let selectList = document.createElement("select");
    selectList.setAttribute("id", "dropdown");
    selectList.setAttribute("class", "des-ocr-dropdown");
    selectList.setAttribute("name", "des-ocr");

    TD.appendChild(selectList);
    data.map((val) => {
      let option = document.createElement("option");
      option.setAttribute("value", val);
      option.text = val;
      selectList.appendChild(option);
    });
  }
  return TD;
});

After removing the custom renderer function the cells perform normally. Cell Data and default dropdowns work fine. This behaviour is shown only after adding the above custom renderer function.

Hi @zabeehmayar18

I tried to recreate your issue and seems that everything works fine in this example: https://jsfiddle.net/vw7k9emd/1/

Maybe there is some part of your code that interfere with your custom renderer in other place? Do you use any frameworks in your project?

No I am just using Handsontable. I have three different custom renderer function in the same table and all behave in the same way. Here is the picture of my HotTable.

Hi @zabeehmayar18

I have also tested @adrian.szymanski example and it workes on my Chrome 96 / macOS Monterey 12.0.1.

Could you please add the missing logic to his demo that will help us to replicate the same issue as the one you get in your project?

Also please specify your testing environment (system / browser version / other technologies used within the project).