Angular13 Handsontable Dropdown Not Working

0
votes

I have a handsontable in my componet.ts and when I try to use the dropdown list and click the down arrow it is just turning into a text editor. Just wondering how I get the dropdown to work properly.

enter image description here

componet.ts

dateToday: number = Date.now();
private hotRegisterer = new HotTableRegisterer();
id = 'hotInstance';
hotSettings: Handsontable.GridSettings = {
  maxRows: 22,
  startRows: 2,
  startCols: 2,
  contextMenu : true,
  height: 'auto',
  width: 'auto',
  minSpareRows: 1,
  columns: [
  {
  type: 'dropdown',
  source: ['sn', 'st']
  },
  {
    editor: 'text'
  },
  {
    type: 'date',
    dateFormat: 'MM/DD/YYYY',
    correctFormat: true,
    defaultDate: this.dateToday+'',
    
  }
],
colHeaders: ['Asset Type','Serial Number','Shipdate'],
rowHeaders: true,
colWidths: 300,
licenseKey: 'non-commercial-and-evaluation'
}

html

<div class="hot">
   <hot-table [hotId]="id" [settings]="hotSettings"></hot-table>
</div>
angularhandsontable