title: Cypress - Access Dropdown Options - Detached from DOM
body: <p>Have already reviewed <a href="https://stackoverflow.com/questions/62493350/how-to-access-dropdown-selection-in-cypress-get-error-element-is-detached-from">this post</a> (and a few others but this is the most similar), read through Cypress docs about this error message <a href="https://www.cypress.io/blog/2020/07/22/do-not-get-too-detached/" rel="nofollow noreferrer">here</a>. I know it's some kind of race error, but can't for the life of me get it right!</p>
  <p>I have a drawer containing a dropdown menu. I want to click the first dropdown menu, and select the first option.</p>
  <p>Here's a simplified version of my test:
  <strong>Update:</strong> Changed to target content of my elements instead of using antd selectors.</p>
  <pre class="lang-js prettyprint-override"><code>it('Adds new involved party to a case', () =&gt; {
      // click button to open drawer that contains dropdown
      cy.contains('Beteiligter')
        .should('exist')
        .click();
  
      cy.contains('Rolle des Beteiligten')
        .should('exist')
        .parent()
        .children()
        .eq(1)
        .should('exist')
        .click();
  
    // click submit button to create involvedParty
    cy.contains('Erstellen').click();
  
    // check that new party has been added to UI
    cy.get('.ant-collapse-header')
      .contains('Cypress Test Company')
      .should('have.length', 1);
    )
  }
  </code></pre>
  <pre class="lang-html prettyprint-override"><code>Timed out retrying: cy.click() failed because this element is detached from the DOM.
  
  &lt;div class=&quot;ant-row ant-form-item&quot;&gt;...&lt;/div&gt;
  
  Cypress requires elements be attached in the DOM to interact with them.
  
  The previous command that ran was:
  
    &gt; cy.should()
  
  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.
  </code></pre>
  <p>HTML for form including dropdown(s):</p>
  <pre class="lang-html prettyprint-override"><code>&lt;form id=&quot;control-ref&quot; class=&quot;ant-form ant-form-horizontal&quot;&gt;&lt;span class=&quot;sc-bdVaJa bWpFch&quot;&gt;Rolle des Beteiligten &lt;/span&gt;
    &lt;div class=&quot;ant-row ant-form-item ant-form-item-has-success&quot;&gt;
      &lt;div class=&quot;ant-col ant-form-item-control&quot;&gt;
        &lt;div class=&quot;ant-form-item-control-input&quot;&gt;
          &lt;div class=&quot;ant-form-item-control-input-content&quot;&gt;
            &lt;div class=&quot;ant-select ant-select-single ant-select-show-arrow&quot;&gt;
              &lt;div class=&quot;ant-select-selector&quot;&gt;&lt;span class=&quot;ant-select-selection-search&quot;&gt;&lt;input id=&quot;control-ref_role&quot; autocomplete=&quot;off&quot; type=&quot;search&quot; class=&quot;ant-select-selection-search-input&quot; role=&quot;combobox&quot; aria-haspopup=&quot;listbox&quot; aria-owns=&quot;control-ref_role_list&quot; aria-autocomplete=&quot;list&quot; aria-controls=&quot;control-ref_role_list&quot; aria-activedescendant=&quot;control-ref_role_list_0&quot; readonly=&quot;&quot; unselectable=&quot;on&quot; value=&quot;&quot; style=&quot;opacity: 0;&quot; aria-expanded=&quot;false&quot;&gt;&lt;/span&gt;
                &lt;span
                  class=&quot;ant-select-selection-item&quot; title=&quot;Arbeitgeber&quot;&gt;Arbeitgeber&lt;/span&gt;
              &lt;/div&gt;&lt;span class=&quot;ant-select-arrow&quot; unselectable=&quot;on&quot; aria-hidden=&quot;true&quot; style=&quot;user-select: none;&quot;&gt;&lt;span role=&quot;img&quot; aria-label=&quot;down&quot; class=&quot;anticon anticon-down ant-select-suffix&quot;&gt;&lt;svg viewBox=&quot;64 64 896 896&quot; focusable=&quot;false&quot; data-icon=&quot;down&quot; width=&quot;1em&quot; height=&quot;1em&quot; fill=&quot;currentColor&quot; aria-hidden=&quot;true&quot;&gt;&lt;path d=&quot;M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/span&gt;&lt;/span&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;&lt;span class=&quot;sc-bdVaJa bWpFch&quot;&gt;Art des Beteiligten &lt;/span&gt;
    &lt;div class=&quot;ant-row ant-form-item&quot;&gt;
      &lt;div class=&quot;ant-col ant-form-item-control&quot;&gt;
        &lt;div class=&quot;ant-form-item-control-input&quot;&gt;
          &lt;div class=&quot;ant-form-item-control-input-content&quot;&gt;
            &lt;div class=&quot;ant-select ant-select-single ant-select-show-arrow&quot;&gt;
              &lt;div class=&quot;ant-select-selector&quot;&gt;&lt;span class=&quot;ant-select-selection-search&quot;&gt;&lt;input id=&quot;control-ref_resource&quot; autocomplete=&quot;off&quot; type=&quot;search&quot; class=&quot;ant-select-selection-search-input&quot; role=&quot;combobox&quot; aria-haspopup=&quot;listbox&quot; aria-owns=&quot;control-ref_resource_list&quot; aria-autocomplete=&quot;list&quot; aria-controls=&quot;control-ref_resource_list&quot; aria-activedescendant=&quot;control-ref_resource_list_0&quot; readonly=&quot;&quot; unselectable=&quot;on&quot; value=&quot;&quot; style=&quot;opacity: 0;&quot;&gt;&lt;/span&gt;
                &lt;span
                  class=&quot;ant-select-selection-placeholder&quot;&gt;&lt;/span&gt;
              &lt;/div&gt;&lt;span class=&quot;ant-select-arrow&quot; unselectable=&quot;on&quot; aria-hidden=&quot;true&quot; style=&quot;user-select: none;&quot;&gt;&lt;span role=&quot;img&quot; aria-label=&quot;down&quot; class=&quot;anticon anticon-down ant-select-suffix&quot;&gt;&lt;svg viewBox=&quot;64 64 896 896&quot; focusable=&quot;false&quot; data-icon=&quot;down&quot; width=&quot;1em&quot; height=&quot;1em&quot; fill=&quot;currentColor&quot; aria-hidden=&quot;true&quot;&gt;&lt;path d=&quot;M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/span&gt;&lt;/span&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;ant-row ant-form-item&quot;&gt;
      &lt;div class=&quot;ant-col ant-form-item-control&quot;&gt;
        &lt;div class=&quot;ant-form-item-control-input&quot;&gt;
          &lt;div class=&quot;ant-form-item-control-input-content&quot;&gt;&lt;button type=&quot;submit&quot; class=&quot;ant-btn ant-btn-primary&quot;&gt;&lt;span&gt;Erstellen&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/0eS8b.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0eS8b.png" alt="Image of the dropdown in my drawer for context" /></a></p>