jQuery UI menu inside cell is not displaying while jQuery DatePicker & Autocomplete is displaying in ag-Grid

I am trying to show a jQuery UI dropdown menu(https://jqueryui.com/menu/) . I am able to integrate jQuery UI for autocomplete and Datepicker . I am trying to implement the jQuery menu on "Age" columnDef.

Plunker Link:-

https://plnkr.co/edit/7SPkMmx2kfqiSZEq

    this.columnDefs = [
          {
            headerName: "Athlete",
            field: "athlete",
            editable:true,
            cellEditor: "dropdownUI"
          },
          {
            headerName: "Date",
            field: "date",
            editable: true,
            cellEditor: "datePicker"
          },
          {
            headerName: "Age",
            field: "age",
            editable:true,      
            cellEditor: "dropdownUIOnKeyPress"  
          },
          {
            headerName: "Country",
            field: "country"
          },
          {
            headerName: "Year",
            field: "year"
          },
          {
            headerName: "Sport",
            field: "sport",
            cellEditor: "agRichSelectCellEditor",
            cellEditorParams: {
              values: this.sports
            },
            editable:true
          }
        ];
    
    function getdropdownUIOnKeyPress() {
  function DropdownuiOnKeyPress() {}
  DropdownuiOnKeyPress.prototype.init = function(params) {
    
    this.eInput = document.createElement("input"); //<====
    this.eInput.value = params.value;
  var listMenu = [
      "ActionScript",
      "AppleScript",
      "Asp"
    ];
    // *************************************************************
   // adding dropdown menu on enter of char
  //  https://jqueryui.com/menu/
    var z = document.createElement('div'); // is a node
    var html = "";
    for(var j = 0; j < listMenu.length; j++){
        html +="<img src='https://'>";
        html +="<ul>";
        html +="<li>"+listMenu[j]+"</li>";
        html +="<ul>";
    }
    z.innerHTML = html;
    $("body").appendChild(z);
     // show above div when some character is input 

    $(this.eInput).menu();  
  };
  DropdownuiOnKeyPress.prototype.getGui = function() {
    return this.eInput;
  };
  DropdownuiOnKeyPress.prototype.afterGuiAttached = function() {
    this.eInput.focus();
    this.eInput.select();
  };
  DropdownuiOnKeyPress.prototype.getValue = function() {
    return this.eInput.value;
  };
  DropdownuiOnKeyPress.prototype.destroy = function() {};
  DropdownuiOnKeyPress.prototype.isPopup = function() {
    return false;
  };
  return DropdownuiOnKeyPress;
}

function getdropdownUI() {
  function Dropdownui() {}
  Dropdownui.prototype.init = function(params) {
    this.eInput = document.createElement("input");
    this.eInput.value = params.value;
        var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    // adding of autocomplete- similarly trying to add dropdown above
    $(this.eInput).autocomplete({
      source: availableTags
    });

  };
  Dropdownui.prototype.getGui = function() {
    return this.eInput;
  };
  Dropdownui.prototype.afterGuiAttached = function() {
    this.eInput.focus();
    this.eInput.select();
  };
  Dropdownui.prototype.getValue = function() {
    return this.eInput.value;
  };
  Dropdownui.prototype.destroy = function() {};
  Dropdownui.prototype.isPopup = function() {
    return false;
  };
  return Dropdownui;
}

function getDatePicker() {
  function Datepicker() {}
  Datepicker.prototype.init = function(params) {
    this.eInput = document.createElement("input");
    this.eInput.value = params.value;
    $(this.eInput).datepicker({ dateFormat: "dd/mm/yy" });
  };
  Datepicker.prototype.getGui = function() {
    return this.eInput;
  };
  Datepicker.prototype.afterGuiAttached = function() {
    this.eInput.focus();
    this.eInput.select();
  };
  Datepicker.prototype.getValue = function() {
    return this.eInput.value;
  };
  Datepicker.prototype.destroy = function() {};
  Datepicker.prototype.isPopup = function() {
    return false;
  };
  return Datepicker;
}

from Recent Questions - Stack Overflow https://ift.tt/347EMY4
https://ift.tt/eA8V8J