segmentio / evergreen

🌲 Evergreen React UI Framework by Segment
https://evergreen.segment.com
MIT License
12.39k stars 832 forks source link

Fix Positioner rendering, Autocomplete + Combobox positioning issues #1362

Closed brandongregoryscott closed 2 years ago

brandongregoryscott commented 2 years ago

Overview

Fixes #1354 Combobox position issue Fixes #1329 Autocomplete 'children' function continuously invoked

The root issue for #1329 was not the ref updates but the useEffect in src/positioner/src/Positioner.js. It was watching dimensions as a dependency while it was using previousDimensions and also calling update, which wasn't wrapped in a useCallback. This should only re-render when those values change. Tested out in storybook using the same console log in the children function as described in #1329

Screenshots (if applicable)

Autocomplete rendering before Positioner change https://www.loom.com/share/353e9a69b7f744d2816bcdab7aff8dda

Autocomplete rendering after Positioner change https://www.loom.com/share/6f9963d7966046fdbd579ea2e3565a35

Note that both of these are after the ref changes in Autocomplete and Combobox were reverted, so those are appearing in the correct location.

Combobox positioning (also demoable from Storybook) image

Autocomplete positioning (also demoable from Storybook) image

Documentation

netlify[bot] commented 2 years ago

βœ”οΈ Deploy Preview for evergreen-storybook ready!

πŸ”¨ Explore the source changes: 2f651715ee12cefd01714f2b1be58157c8203e1e

πŸ” Inspect the deploy log: https://app.netlify.com/sites/evergreen-storybook/deploys/619410e72133fc00072bb3cd

😎 Browse the preview: https://deploy-preview-1362--evergreen-storybook.netlify.app