Dropdown, RichTooltip - fix ResizeObserver-related errors (#2550)

Author: alex-ju

.changeset/great-papayas-develop.md

@@ -0,0 +1,7 @@
+---
+"@hashicorp/design-system-components": patch
+---
+
+`Dropdown`, `RichTooltip` - Fixed `ResizeObserver`-related errors in tests
+
+Upgraded `@floating-ui/dom` to `1.6.12`

packages/components/package.json

@@ -39,7 +39,7 @@
     "@ember/string": "^3.1.1",
     "@ember/test-waiters": "^3.1.0",
     "@embroider/addon-shim": "^1.8.7",
-    "@floating-ui/dom": "^1.6.3",
+    "@floating-ui/dom": "^1.6.12",
     "@hashicorp/design-system-tokens": "^2.2.1",
     "@hashicorp/flight-icons": "^3.7.0",
     "clipboard-polyfill": "^4.1.0",

packages/components/src/modifiers/hds-anchored-position.ts

@@ -133,8 +133,12 @@ export const getFloatingUIOptions = (
     middleware.push(
       size({
         apply({ rects, elements }) {
-          Object.assign(elements.floating.style, {
-            width: `${rects.reference.width}px`,
+          // wrap Object.assign inside a requestAnimationFrame to avoid ResizeObserver loop limit exceeded error
+          // https://github.com/floating-ui/floating-ui/issues/1740
+          requestAnimationFrame(() => {
+            Object.assign(elements.floating.style, {
+              width: `${rects.reference.width}px`,
+            });
           });
         },
       })

showcase/tests/integration/components/hds/dropdown/index-test.js

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-import { module, test, skip } from 'qunit';
+import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { render, click } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
@@ -172,8 +172,7 @@ module('Integration | Component | hds/dropdown/index', function (hooks) {
     assert.dom('.hds-dropdown__content').hasStyle({ width: '248px' });
   });
 
-  // flaky erroring with 'ResizeObserver loop completed with undelivered notifications.'
-  skip('it should render the content with the same width as the ToggleButton if @matchToggleWidth is set', async function (assert) {
+  test('it should render the content with the same width as the ToggleButton if @matchToggleWidth is set', async function (assert) {
     await render(hbs`
       <Hds::Dropdown id="test-dropdown" @matchToggleWidth={{true}} as |D|>
         <D.ToggleButton {{style width="200px"}} @text="toggle button" id="test-toggle-button" />

yarn.lock

@@ -3080,7 +3080,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@floating-ui/dom@npm:^1.6.3":
+"@floating-ui/dom@npm:^1.6.12":
   version: 1.6.12
   resolution: "@floating-ui/dom@npm:1.6.12"
   dependencies:
@@ -3902,7 +3902,7 @@ __metadata:
     "@ember/test-waiters": "npm:^3.1.0"
     "@embroider/addon-dev": "npm:^4.3.1"
     "@embroider/addon-shim": "npm:^1.8.7"
-    "@floating-ui/dom": "npm:^1.6.3"
+    "@floating-ui/dom": "npm:^1.6.12"
     "@glimmer/component": "npm:^1.1.2"
     "@glimmer/tracking": "npm:^1.1.2"
     "@glint/core": "npm:^1.4.0"