VaDropdown:Content Not Hoverable

Build 466 on develop
1200px
Reviewing disabled
Fail
VaDropdown.stories.ts
Unable to find an element with the text: Hovered. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

Ignored nodes: comments, script, style
<body
  class="sb-main-padded sb-show-main va-screen-md"
>
  
  
  <div
    class="sb-preparing-story sb-wrapper"
  >
    
  
    <div
      class="sb-loader"
    />
    

  </div>
  


  <div
    class="sb-preparing-docs sb-wrapper"
  >
    
  
    <div
      class="sb-previewBlock"
    >
      
    
      <div
        class="sb-previewBlock_header"
      >
        
      
        <div
          class="sb-previewBlock_icon"
        />
        
      
        <div
          class="sb-previewBlock_icon"
        />
        
      
        <div
          class="sb-previewBlock_icon"
        />
        
      
        <div
          class="sb-previewBlock_icon"
        />
        
    
      </div>
      
    
      <div
        class="sb-previewBlock_body"
      >
        
      
        <div
          class="sb-loader"
        />
        
    
      </div>
      
  
    </div>
    
  
    <table
      aria-hidden="true"
      class="sb-argstableBlock"
    >
      
    
      <thead
        class="sb-argstableBlock-head"
      >
        
      
        <tr>
          
        
          <th>
            <span>
              Name
            </span>
          </th>
          
        
          <th>
            <span>
              Description
            </span>
          </th>
          
        
          <th>
            <span>
              Default
            </span>
          </th>
          
        
          <th>
            <span>
              Control 
            </span>
          </th>
          
      
        </tr>
        
    
      </thead>
      
    
      <tbody
        class="sb-argstableBlock-body"
      >
        
      
        <tr>
          
        
          <td>
            <span>
              propertyName
            </span>
            <span
              title="Required"
            >
              *
            </span>
          </td>
          
        
          <td>
            
          
            <div>
              <span>
                This is a short description
              </span>
            </div>
            
          
            <div
              class="sb-argstableBlock-summary"
            >
              
            
              <div>
                <span
                  class="sb-argstableBlock-code"
                >
                  summary
                </span>
              </div>
              
          
            </div>
            
        
          </td>
          
        
          <td>
            
          
            <div>
              <span
                class="sb-argstableBlock-code"
              >
                defaultValue
              </span>
            </div>
            
        
          </td>
          
        
          <td>
            <button>
              Set string
            </button>
          </td>
          
      
        </tr>
        
      
        <tr>
          
        
          <td>
            <span>
              propertyName
            </span>
            <span>
              *
            </span>
          </td>
          
        
          <td>
            
          
            <div>
              <span>
                This is a short description
              </span>
            </div>
            
          
            <div
              class="sb-argstableBlock-summary"
            >
              
            
              <div>
                <span
                  class="sb-argstableBlock-code"
                >
                  summary
                </span>
              </div>
              
          
            </div>
            
        
          </td>
          
        
          <td>
            
          
            <div>
              <span
                class="sb-argstableBlock-code"
              >
                defaultValue
              </span>
            </div>
            
        
          </td>
          
        
          <td>
            <button>
              Set string
            </button>
          </td>
          
      
        </tr>
        
      
        <tr>
          
        
          <td>
            <span>
              propertyName
            </span>
            <span>
              *
            </span>
          </td>
          
        
          <td>
            
          
            <div>
              <span>
                This is a short description
              </span>
            </div>
            
          
            <div
              class="sb-argstableBlock-summary"
            >
              
            
              <div>
                <span
                  class="sb-argstableBlock-code"
                >
                  summary
                </span>
              </div>
              
          
            </div>
            
        
          </td>
          
        
          <td>
            
          
            <div>
              <span
                class="sb-argstableBlock-code"
              >
                defaultValue
              </span>
            </div>
            
        
          </td>
          
        
          <td>
            <button>
              Set string
            </button>
          </td>
          
      
        </tr>
        
    
      </tbody>
      
  
    </table>
    

  </div>
  


  <div
    class="sb-nopreview sb-wrapper"
  >
    
  
    <div
      class="sb-nopreview_main"
    >
      
    
      <h1
        class="sb-nopreview_heading sb-heading"
      >
        No Preview
      </h1>
      
    
      <p>
        Sorry, but you either have no stories or none are selected somehow.
      </p>
      
    
      <ul>
        
      
        <li>
          Please check the Storybook config.
        </li>
        
      
        <li>
          Try reloading the page.
        </li>
        
    
      </ul>
      
    
      <p>
        
      If the problem persists, check the browser console, or the terminal you've run Storybook from.
    
      </p>
      
  
    </div>
    

  </div>
  


  <div
    class="sb-errordisplay sb-wrapper"
  >
    
  
    <pre
      class="sb-heading"
      id="error-message"
    />
    
  
    <pre
      class="sb-errordisplay_code"
    >
      <code
        id="error-stack"
      />
    </pre>
    

  </div>
  

  
  <div
    data-v-app=""
    id="storybook-root"
  >
    
    <div
      aria-disabled="false"
      aria-expanded="true"
      aria-label="toggle dropdown"
      class="va-dropdown"
      data-testid="target"
      data-va-teleported-from="0_3"
      role="button"
      style="position: relative;"
    >
       Hover me 
    </div>
    
    
    
  </div>
  
  
  <div
    hidden="true"
    id="storybook-docs"
  />
  
  
  



  <div
    class="va-dropdown__content-wrapper"
    data-va-teleported="0_3"
    style="position: absolute; max-height: 876.938px; left: 0px; top: 0px; transform: translate(6px, 23px);"
  >
     Content 
  </div>
  
</body>
View in Storybook
Chrome 105
65x21
Linux Linux Ubuntu 20.04.4
a5439f on develop
Caught exception in play function

This story threw an error after it finished rendering which means interactions may not have been executed fully.

Error: ignoredException
    at https://64d608ab34b67e621ab50cfd-pibviywlfu.capture-loopback.chromatic.com/sb-preview/runtime.js:4:95647