Custom styling of autocomplete caret

#1

default caret style:
image

expected caret style:
image

I could able to achieve it using custom autocomplete renderer below, but after changing the default caret to font awesome, dropdown menu doesn’t come up after single click on caret.

function autocompleteRenderer(instance, td, row, col, prop, value, cellProperties) {
Handsontable.renderers.AutocompleteRenderer.apply(this, arguments)

if(value !== null) {
td.innerHTML = <div class="htAutocompleteArrow"><i class="fas fa-caret-down"></i></div>${value}
} else {
td.innerHTML = <div class="htAutocompleteArrow"><i class="fas fa-caret-down"></i></div>Add Property ID
}

// instance.acArrowListener = function(event) {
// if (Handsontable. dom.hasClass(event.target, ‘htAutocompleteArrow’)) {
// instance.view.wt.getSetting(‘onCellDblClick’, null, instance.getCoords(), TD);
// }
// };
//
// Handsontable.eventManager(instance).addEventListener(instance.rootElement, ‘mousedown’, instance.acArrowListener);
}

#2

Hi @siddhartha.sarkar-x

For custom styling of autocomplete caret, you don’t need to create a custom renderer. This can be achieved using CSS alone - https://jsfiddle.net/jn487ud1/

Does it meet your goal?

#3

Hey @siddhartha.sarkar-x

how is the progress? Do you need anything more?

#4

Hey I can abled to solve the issue. Thanks for prompt reply

#5

Great. Thank you for the update :slight_smile:

#6