How to create a custom autocomplete editor which behaves as a multiselect?

#1

I have created a custom multiselect by extending Autocomplete editor, but it resets everytime I open the editor again.
// eslint-disable-next-line no-undef
export default class MultiSelectAutocompleteEditor extends Handsontable.editors.AutocompleteEditor {
constructor(hotInstance) {
super(hotInstance);
this.selectedValues = [];
}

prepare(row, col, prop, td, originalValue, cellProperties) {
super.prepare(row, col, prop, td, originalValue, cellProperties);
this.TD = td;
this.selectedValues = originalValue || [];
}

open() {
super.open();
if (this.TD) {
this.htEditor.updateSettings({
afterRenderer: (TD, row, col, prop, value) => {
const isSelected = this.selectedValues.includes(value);
const actionText = isSelected ? ’ (enter to deselect)’ : ’ (enter to select)’;
// eslint-disable-next-line unicorn/prefer-dom-node-text-content
TD.innerText = value + actionText;
},
beforeOnCellMouseDown: (event, coords, _TD) => {
// Handle mouse click selection/deselection
const value = this.htEditor.getDataAtRow(coords.row)[0];
this.toggleSelection(value);
this.htEditor.render(); // Refresh dropdown to reflect changes
event.stopImmediatePropagation(); // Prevent closing on click
event.preventDefault();
},
});
}
}

close() {
super.close();
}

getValue() {
// Return selected values as an array
return this.selectedValues;
}

setValue(value) {
// Only fix: properly initialize selectedValues from the cell data
this.selectedValues = Array.isArray(value) ? […value] : []; // Treat as array or empty if not
}

onBeforeKeyDown(event) {
// eslint-disable-next-line no-undef
const isEnter = Handsontable.helper.KEY_CODES.ENTER === event.keyCode;

if (isEnter) {
  const selectedItem = this.htEditor.getDataAtRow(this.htEditor.getSelected()[0]);

  if (selectedItem) {
    const value = selectedItem[0];
    this.toggleSelection(value);
    this.htEditor.render(); // Refresh dropdown to reflect changes
  }

  // Prevent default behavior so that the dropdown doesn't close automatically
  event.stopImmediatePropagation();
  event.preventDefault();
}

super.onBeforeKeyDown(event); // Ensure we keep default key handling behavior for other keys

}

toggleSelection(value) {
const valueIndex = this.selectedValues.indexOf(value);
if (valueIndex === -1) {
// Add to selected values if not already selected
this.selectedValues.push(value);
}
else {
// Remove from selected values if already selected
this.selectedValues.splice(valueIndex, 1);
}
}
}
I know this is not the right place to paste this. I’m not able to make a JS fiddle out of it at the moment for some reason. Can you please help me in getting this corrected? I have already sent my license ID to support@handsontable.com
I just need the autocomplete editor to behave as multiselect i.e when options are selected each options gets pushed to an array of values and dropdown shows enter to select/deselect beside the options based on the data that is selected.
I already have a multi select renderer which joins these array values with ", " and shows it on the cell

#2

Hi @maffan

Thank you for sharing the code and description.

You are right; we do not have a multi-select editor built in, so this ticket would need to be treated as a custom functionality with a code review.

Please check your inbox. I have sent details in response to your license ID email.

#3

Hello,

This is an impressive implementation of a multiselect using the Autocomplete editor! I noticed the issue with selected values resetting when reopening the editor, and it seems like ensuring that selectedValues is correctly initialized and persisted is key. Have you tried adjusting the prepare and setValue methods to retain the selections?

#4

Hi @thomas642daniel

Thank you very much for joining in and sharing valuable insights.