cypress - Element covered by another element after angular upgrade

I have a cypress test which has started to fail after the angular upgrade. Its complaining that the element to be clicked is covered by another element when actually it is not. I have attached the screenshot of the error on cypress runner and also of the dom. Any suggestion what is going wrong over here. thanks



Dom

I am using a function to select the dropdown option


selectOptionByOptionValue(formField, valueToFind) {

formField.then(($el) => {
if ($el.attr('aria-owns') !== undefined) {
console.log('use aria-owns');
formField
.invoke('attr', 'aria-owns')
.then(id => {
cy.get(`#${id}`)
.contains(valueToFind)
.click();
});
} else {
console.log("use aria-control?")
formField
.click()
.invoke('attr', 'aria-controls')
.then(id => {
cy.get(`#${id}`)
.contains(valueToFind)
.click();
});
}
})

Continue reading...