Cypress – cannot select option in dropdown inside the iframe

I have a dropdown like below:
enter image description here
The panel with the options is displayed only when the user starts typing.
The DOM input element is defined as below:

<input _ngcontent-ng-c3697127439="" autocompletetrigger="" closeonselection="false" chip-input=""  class="input text-input capital-letters ng-untouched ng-pristine ng-valid" spellcheck="false" autocomplete="off">

Because this element is inside the iframe simple typing in element and selecting an option from displayed panel doesn’t work.
Using below command:
cy.getIframe().find('input.input').type('M')
types in the input element but almost immediately the typed text is cleared and the panel is not displayed.

I tried many things: using cy.type() command, using .invoke(‘val’) command, using cypress-iframe plugin but I wasn’t able to get the panel displayed.
I have similar dropdown where the panel is displayed when the user clicks on it and to get this working in Cypress I use below method:

    selectType(rowNumber, option) {
        this.getTypeDropdown(rowNumber).trigger('ngModelChange').then(($el) => {
            cy.wait(1000);
            cy.wrap($el).click();
            cy.getIframe().contains('li', option).click({force: true});
        })
    }

I guess something like above method will do the trick for the dropdown where the user types instead of clicking. Perhaps, other event method in trigger command?
For sure, this issue happens because the element is inside the iframe and Cypress has difficulties in dealing with the iframes 🙁