Clay: ClayDropdown.Menu panel misalignment within a ClayModal when the modal body is scrollable

[diegonvs]

• [X] I have searched the issues of this repository and believe that this is not a duplicate.

Is there an example you can provide via codesandbox.com?

https://codesandbox.io/s/peaceful-bhabha-lfv6d?file=/src/index.js

What are the steps to reproduce?

If you use ClayModal.Body as scrollable and use a ClayDropdown.Menu component within, the dropdown panel will not be realigned to the trigger element.

What is the expected result?

Dropdown panel still aligned with the trigger element.

Using observeRect from '@reach/observe-rect' may solve it. As the example below:

https://github.com/liferay-frontend/liferay-portal/pull/430/files#diff-298ea5905081aa95c932d1681a7bcf60538269e3e9a96379a504259364432271R99-R101

Environment

| Tech | Version |
| ----- | ------- |
| Clay | v3.8.0 |
| React | XXXX |

[wincent]

Using observeRect from '@reach/observe-rect' may solve it.

@reach/observe-rect is only a few lines of code, so if we wanted to avoid the liability of pulling in another third-party dependency (we have been burned so many times in the past) we could probably implement equivalent functionality pretty trivially.

[github-actions[bot]]

This issue has been merged and will be released in DXP at https://issues.liferay.com/browse/LPS-126700