title: CypressError: Timed out retrying: cy.click() failed because this element is detached from the DOM
body: <p>The dropdown basically takes long to get load itself once the back end response is received. If I put a wait of around 8 seconds, then it works. But, don't want to hard code the wait here. Any idea as what might be going wrong? I couldn't identify the css as well.</p>
  
  <pre><code>cy.get('input').last().type(`{selectall}${value}`);
          cy.get('mat-option &gt; span').then(option =&gt; {
              if (option.get(0).textContent === 'Loading...') {
                  cy.wait(5000);
              }
          });   
  
  cy.containsCaseInsensitive(value, 'mat-option').first().scrollIntoView().debug().click();
  </code></pre>
  
  <p>The error log - </p>
  
  <pre><code>CypressError: Timed out retrying: cy.click() failed because this element is detached from the DOM.
  
  &lt;mat-option _ngcontent-gcj-c21="" class="mat-option ng-star-inserted" role="option" ng-reflect-value="[object Object]" tabindex="0" id="mat-option-104" aria-disabled="false" style=""&gt;...&lt;/mat-option&gt;
  
  Cypress requires elements be attached in the DOM to interact with them.
  
  The previous command that ran was:
  
    &gt; cy.debug()
  
  This DOM element likely became detached somewhere between the previous and current command.
  
  Common situations why this happens:
    - Your JS framework re-rendered asynchronously
    - Your app code reacted to an event firing and removed the element
  
  You typically need to re-query for the element or add 'guards' which delay Cypress from running new commands.
  
  https://on.cypress.io/element-has-detached-from-dom
  </code></pre>