Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: tailwindlabs/headlessui
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: @headlessui/[email protected]
Choose a base ref
...
head repository: tailwindlabs/headlessui
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: @headlessui/[email protected]
Choose a head ref
  • 3 commits
  • 18 files changed
  • 3 contributors

Commits on Sep 1, 2024

  1. Configuration menu
    Copy the full SHA
    2ff8458 View commit details
    Browse the repository at this point in the history

Commits on Sep 3, 2024

  1. Fix components not properly closing when using the transition prop (#…

    …3448)
    
    This PR fixes a bug where the components don't always properly close
    when using the `transition` prop on those components.
    
    The issue here is that the internal `useTransition(…)` hook relies on a
    DOM node. Whenever the DOM node changes, we need to re-run the
    `useTransition(…)`. This is why we store the DOM element in state
    instead of relying on a `useRef(…)`.
    
    Let's say you have a `Popover` component, then the structure looks like
    this:
    ```ts
    <Popover>
      <PopoverButton>Show</PopoverButton>
      <PopoverPanel>Contents</PopoverPanel>
    </Popover>
    ```
    
    We store a DOM reference to the button and the panel in state, and the
    state lives in the `Popover` component. The reason we do that is so that
    the button can reference the panel and the panel can reference the
    button. This is needed for some `aria-*` attributes for example:
    ```ts
    <PopoverButton aria-controls={panelElement.id}>
    ```
    
    For the transitions, we set some state to make sure that the panel is
    visible or hidden, then we wait for transitions to finish by listening
    to transition related events on the DOM node directly.
    
    If you now say, "hey panel, please re-render because you have to become
    visible/hidden" then the component re-renders, the panel DOM node
    (stored in the `Popover` component) eventually updates and then the
    `useTransition(…)` hooks receives the new value (either the DOM node or
    null when the leave transition is complete).
    
    The problem here is the round trip that it first has to go to the root
    `<Popover/>` component, re-render everything and provide the new DOM
    node to the `useTransition(…)` hook.
    
    The solution? Local state so that the panel can re-render on its own and
    doesn't require the round trip via the parent.
    
    Fixes: #3438
    Fixes: #3437
    Fixes: tailwindlabs/tailwind-plus-issues#1625
    
    ---------
    
    Co-authored-by: Jonathan Reinink <[email protected]>
    RobinMalfait and reinink authored Sep 3, 2024
    Configuration menu
    Copy the full SHA
    071aa0e View commit details
    Browse the repository at this point in the history
  2. Configuration menu
    Copy the full SHA
    75619ee View commit details
    Browse the repository at this point in the history
Loading