amaannawab923 commented on code in PR #33054:
URL: https://github.com/apache/superset/pull/33054#discussion_r2037773296
##########
superset-frontend/src/components/DropdownContainer/index.tsx:
##########
@@ -179,6 +179,39 @@ const DropdownContainer = forwardRef(
[items, overflowingIndex],
);
+ useEffect(() => {
+ const container = current?.children.item(0);
+ if (!container) return;
+
+ const childrenArray = Array.from(container.children);
+
+ const resizeObserver = new ResizeObserver(() => {
+ recalculateItemWidths();
+ });
+
+ childrenArray.forEach(child => resizeObserver.observe(child));
+
+ return () => {
+ childrenArray.forEach(child => resizeObserver.unobserve(child));
+ resizeObserver.disconnect();
+ };
+ }, [current, items.length]);
+
+ // callback to update item widths so that the useLayoutEffect runs whenever
+ // width of any of the child changes
+ const recalculateItemWidths = () => {
+ const container = current?.children.item(0);
+ if (container) {
+ const { children } = container;
+ const childrenArray = Array.from(children);
+
+ const currentWidths = childrenArray.map(child =>
child.getBoundingClientRect().width);
+
+ // Update state with new widths
+ setItemsWidth(currentWidths);
+ }
+ };
+
Review Comment:
Earlier the native filter width was constant at gridUnit * 41 so we needed
to calculate the overflowing elements only when a native filter was added or
removed... And the UseLayoutEffect hook doesnt run whenever an existing Native
filter adds in or loses the Exclude filter values checkbox and also the item
widths arent updated whenever we add in or remove the dynamic exclude checkbox
What happens when we remove this code ?
<img width="1728" alt="Screenshot 2025-04-10 at 9 36 14 PM"
src="https://github.com/user-attachments/assets/ab90834c-6587-49ed-b63c-1978ecc1d982";
/>
I have added 6 filters which looks perfectly fine because the overflowing
are being calculated properly but what happens if i add exclude filters
checkbox on 2 of those without these resize observers
<img width="1716" alt="Screenshot 2025-04-10 at 9 36 39 PM"
src="https://github.com/user-attachments/assets/890c5b88-a778-4f17-9a5e-c91ffc983e0f";
/>
The item widths arent updated , the overflowing elements arent recalculated
and the 4th one overflows even when it should have gone inside the dropdown
When i add the resize observers back , the calculations re run and the 4th
one is pushed inside the dropdown , which is expected
<img width="1723" alt="Screenshot 2025-04-10 at 9 39 00 PM"
src="https://github.com/user-attachments/assets/c2908537-ad6d-4d71-ab8e-b1e0ae304dd9";
/>
--
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]
