codyml opened a new pull request, #22324: URL: https://github.com/apache/superset/pull/22324
<!--- Please write the PR title following the conventions at https://www.conventionalcommits.org/en/v1.0.0/ Example: fix(dashboard): load charts correctly --> ### SUMMARY <!--- Describe the change below, including rationale and design decisions --> As discovered as part of #22317, the `useCSSTextTruncation` hook had a difficult to track down bug: the effect responsible for updating the `isTruncated` value based on DOM measurements wouldn't run, even though console logs showed that values in its dependency array were changing. Upon investigation, it seems this is an intended behavior of React, as described by [this comment](https://github.com/facebook/react/issues/24042#issuecomment-1104391636): even if dependency arrays change, React will abort the entire render cycle (including effects) if neither props, state nor context have changed. Because the dependency array of the effect in question is currently based on values derived from refs, changes to these values don't indicate to React that the render cycle is "worth it", so if no other props, state or context changes in the component calling the hook, the render cycle is thrown out and the effect that would update the `isTruncated` value never runs. To fix this, this PR removes the use of refs to store intermediate values and instead adds a new effect that runs every render and sets the `offsetWidth` and `scrollWidth` state variables to whatever the current DOM measurement is. No dependency array or checks for changes are necessary to avoid infinite render cycles because updating state in functional components to the same value does not trigger a re-render. This PR then updates the previously-existing effect to be much simpler, taking advantage of this same no-op behavior of setting the state to an existing value. ### BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF <!--- Skip this if not applicable --> Example that's broken in #22317: https://user-images.githubusercontent.com/13007381/205420495-23b9c047-0554-4113-bd2e-1490a55489b0.mov #22317 after cherry-picking this commit: https://user-images.githubusercontent.com/13007381/205420504-e03312e4-5a61-4c2a-8ff2-e9f799f2b2b3.mov ### TESTING INSTRUCTIONS <!--- Required! What steps can be taken to manually verify the changes? --> Check that truncation-based tooltips still work as expected wherever `useCSSTextTruncation` is used: - `DateFilterLabel` in Dashboard native filters (vertical + horizontal) and Explore ad-hoc filters - Horizontal filter bar dividers, non-overflow and overflow ### ADDITIONAL INFORMATION <!--- Check any relevant boxes with "x" --> <!--- HINT: Include "Fixes #nnn" if you are fixing an existing issue --> - [ ] Has associated issue: #22317 - [x] Required feature flags: `HORIZONTAL_FILTER_BAR` - [x] Changes UI - [ ] Includes DB Migration (follow approval process in [SIP-59](https://github.com/apache/superset/issues/13351)) - [ ] Migration is atomic, supports rollback & is backwards-compatible - [ ] Confirm DB migration upgrade and downgrade tested - [ ] Runtime estimates and downtime expectations provided - [ ] Introduces new feature or API - [ ] Removes existing feature or API -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected] --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
