JSFiddle - React, Tailwind, and code Playground

HTML

<div id="example" class="handsontable" style="
        height: 400px;
        width: 400px;
        overflow:hidden">
</div>

CSS

</style><!-- Ugly Hack due to jsFiddle issue --> <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="https://docs.handsontable.com/0.24.1/bower_components/handsontable/dist/handsontable.full.js"></script> <link type="text/css" rel="stylesheet" href="https://docs.handsontable.com/0.24.1/bower_components/handsontable/dist/handsontable.full.min.css">

JavaScript

$(document).ready(function() {
  var skipOne = false;
  Handsontable.editors.AutocompleteEditor.prototype.open = function() {
    var dom = Handsontable.Dom;
    Handsontable.editors.HandsontableEditor.prototype.open.apply(this, arguments);
    var choicesListHot = this.htEditor.getInstance();
    var that = this;
    this.TEXTAREA.style.visibility = 'visible';
    this.focus();
    choicesListHot.updateSettings({
      'colWidths': [dom.outerWidth(this.TEXTAREA) - 2],
      width: dom.outerWidth(this.TEXTAREA) + dom.getScrollbarWidth() + 2,
      afterRenderer: function(TD, row, col, prop, value) {
        var caseSensitive = this.getCellMeta(row, col).filteringCaseSensitive === true,
          indexOfMatch,
          match;
        if (value) {
          indexOfMatch = caseSensitive ? value.indexOf(this.query) : value.toLowerCase().indexOf(that.query.toLowerCase());
          if (indexOfMatch != -1) {
            match = value.substr(indexOfMatch, that.query.length);
            TD.innerHTML = value.replace(match, '<strong>' + match + '</strong>');
          }
        }
      }
    });
    this.htEditor.view.wt.wtTable.holder.parentNode.style['padding-right'] = dom.getScrollbarWidth() + 2 + 'px';
    if (skipOne) {
      skipOne = false;
    }
    that.instance._registerTimeout(setTimeout(function() {
      that.queryChoices(that.TEXTAREA.value);
      that.htContainer.style.overflow = 'auto'; // small hack to prevent vertical scrollbar causing a horizontal scrollbar
      // AUTOCOMPLETE FIX BEGIN https://github.com/handsontable/handsontable/issues/2483
      // total height of the dropdown container
      var htContainerHeightPosition = that.htContainer.parentElement.offsetHeight + that.htContainer.parentElement.offsetTop;
      var cssPosition = "";
      var cssTop = "";
      // outside the table
      if (htContainerHeightPosition - that.instance.table.offsetHeight > 0) {
        // opens the dropdown menu above the cell
        cssPosition = "absolute";
...