formaat-design / reshaped

Community repository for storing examples, reporting issues and tracking roadmap
https://reshaped.so
119 stars 4 forks source link

Flyout update position is not working #324

Closed mareksed closed 1 month ago

mareksed commented 1 month ago

Describe the bug in the flyout code this line is making update position method on instanceRef useless.

    const handleTriggerMouseDown = React.useCallback(() => {
        const rect = triggerElRef.current?.getBoundingClientRect();
        triggerBoundsRef.current = rect;
    }, [triggerElRef]);

then in useFlyout you have this.

    const triggerBounds = passedTriggerBounds || triggerEl.getBoundingClientRect();

after clicking on trigger the passedTriggerBounds are always set.

To Reproduce In storybook the story named Test Dynamic Bounds that tests/showcases the update position method and it works but, in the story the trigger is never pressed because the flyout is in active state. So disable it and trigger it to open.

Expected behavior update position works

Environment (please complete the following information):

Additional context I guess the bug was introduced at this fix. https://github.com/orgs/formaat-design/projects/2?pane=issue&itemId=74688558

blvdmitry commented 1 month ago

Thanks for reporting, fixing it for the next patch. I am saving the trigger bounds on click to make sure that flyout position is calculated before scale effect of the button changes its bounding rect. However I wasn't resetting the ref back to null once the calculation is over. I've added a reset for the moment once the transition starts so updatePosition works correctly now too.

https://github.com/user-attachments/assets/65f1cf2a-b860-4f4c-af8f-0b62fef519e7