Seeking Advice for Autocomplete Dropdown in Grid Cells

Tags: #<Tag:0x00007efc6541b370> #<Tag:0x00007efc6541b208>
#1

I have a rather unusual scenario and would love to know if there’s a workaround or a creative solution! :blush:

In my grid, I use autocomplete cells with long selection lists (20 to 50 items). I’d like these autocomplete cells to behave slightly differently: on the first click, I want the dropdown to open and display all available options immediately.

I tried implementing a creative solution, but it led to some unintended side effects. Here’s what I did:

  • On the afterBeginEditing event, I attached a function that clears the current selection, which makes the list visible.
  • However, if the user clicks outside the dropdown (closing it without selecting anything), the system ends up saving an empty value.

To address this, I introduced a variable (e.g., validClickedSelection ) that tracks whether a valid selection was made. This variable is set to true using a mousedown listener on .listbox :

$(document).on("mousedown", ".listbox", function (e) { /* logic here */ });

Then, in the beforeChange event, I validate this variable to decide whether to commit the value.

The problem is that beforeChange is triggered before the mousedown event, so the logic doesn’t work as intended.

Is there a better approach or workaround you’d recommend?

Thank you in advance for your help!

#2

Hi @miltiadis.sitaridis

I think in that case you can use the onBeforeCellMouseDown hook instead of beforeChange, as it’s executed first: https://handsontable.com/docs/javascript-data-grid/api/hooks/#beforeoncellmousedown

Let me know if that helps, if not it would best you could share your current implementation as a code demo in jsFiddle or StackBlitz to get better idea of the behavior.

#3

Hi adrian.szymanski
Thank you so much for the quick reply! Your suggestion has pointed me in the right direction, and I’m almost there.

I have just one (hopefully final) question:
Is there a way to capture the event when the dropdown opens? I’d like to use it to set the validClickedSelection variable.

I tried using the beforeDropdownMenuShow event, but it doesn’t seem to be triggered

Thanks again for your help!

#4

Hi adrian.szymanski,

Thanks to your help, I’ve found a working solution! :blush:

For the record, here’s the solution I applied:

  1. afterBeginEditing :
    I set the value of the autocomplete cell to empty, ensuring that the dropdown displays all options.

  2. beforeOnCellMouseDown :
    I set a global variables:

lastClickedCellCoords = ${coords.row}:${coords.col};

  1. beforeChange :
    I validate the changes with the following logic when the column type is autocomplete:

const changedCellCoords = ${changes[0][0]}:${changes[0][1]};
const revertEmptyCellSelection = lastClickedCellCoords !== changedCellCoords;

Thanks again for pointing me in the right direction!

#5

@miltiadis.sitaridis

That’s a great news! I’m glad that you were able to find the right solution for your requirement. I’ll close this topic now, but feel free to open a new one if you have any other questions.

#6