Ability to unmount Menu.Item

[rijk]

From the docs I'm not sure what the unmount parameter is supposed to do, so I can't say for sure this is a bug, but here goes:

Going by this example: https://github.com/tailwindlabs/headlessui/blob/develop/packages/%40headlessui-react/pages/menu/menu-with-framer-motion.tsx, you need a render prop to get framer-motion exit animations to work:

<Menu>
  {({ open }) => (
    <>
      <Menu.Button>...</Menu.Button>

      <AnimatePresence>
        {open && (
          <Menu.Items
            static
            as={motion.div}
            initial={{ opacity: 0, y: 0 }}
            animate={{ opacity: 1, y: '0.5rem' }}
            exit={{ opacity: 0, y: 0 }}
          >
            ...
          </Menu.Items>
        )}
      </AnimatePresence>
    </>
  )}
</Menu>

However, since framer-motion does its own mount/unmount detection, we actually don't need this, and could (in theory) just do this:

<Menu>
  <Menu.Button>...</Menu.Button>

  <AnimatePresence>
    <Menu.Items
      unmount
      as={motion.div}
      initial={{ opacity: 0, y: 0 }}
      animate={{ opacity: 1, y: '0.5rem' }}
      exit={{ opacity: 0, y: 0 }}
    >
      ...
    </Menu.Items>
  </AnimatePresence>
</Menu>

Which is of course a lot simpler and looks better in my opinion.

However, this doesn't work as the <Menu.Items> element is never unmounted from the tree, even with the unmount parameter:

This blocks <AnimatePresence> from briefly keeping the element in DOM and firing the exit animation.

I would expect the <Menu.Items> to disappear from the React DOM, especially when the unmount parameter is set. It's unclear to me why it hangs around, especially as the linked example removes it from the DOM as well (with the {open && (), and it seems to work just fine. Also, the behaviour doesn't seem to change when I switch to unmount={false}. So that's why I reason it's probably a bug.

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

The unmount prop feature is not yet released, but unmount={true} is the default behaviour. The idea is that when you add unmount={true} you will unmount the DOM nodes when the Menu.Items should be invisible. When you set unmount={false} then the DOM nodes will still be they will be marked with a hidden attribute and a style={{ display: 'none' }}

That said, the unmount strategy is used in a DOM perspective. So the actual React node will still be there, as far as I know you can't unmount yourself. Reason being is that once you provide a prop to the Menu.Items component, the logic happening is already inside the component, so you are already too late if that makes sense. So instead we hide/unmount the children of the Menu.Items component.

I know you can do some magic where you tell your parent that you don't want to be rendered anymore I think. But since we are not always a direct child of the parent then this can get hairy.

I'm not sure if this answers your question.

[rijk]

Hi @RobinMalfait , thanks, makes sense! How do you handle open/close state right now, I'm guessing with context?

[rijk]

Couldn't you do it here? https://github.com/tailwindlabs/headlessui/blob/develop/packages/%40headlessui-react/src/components/menu/menu.tsx#L365

Very crude implementation:

if ( props.unmount && state.menuState === MenuStates.Closed ) {
  return null
}

[RobinMalfait]

@rijk that's essentially what's happening (in that render function). The issue is that return null inside of the Menu.Items will unmount the children of the items and the items itself in the DOM, but not in the React tree.

The render() function does it here: https://github.com/tailwindlabs/headlessui/blob/develop/packages/@headlessui-react/src/utils/render.ts#L62-L65

[RobinMalfait]

Hi @RobinMalfait , thanks, makes sense! How do you handle open/close state right now, I'm guessing with context?

Yep, currently it is read from context indeed!

[rijk]

Ah shoot, you're right. But in any case, if it returns null here, why is the Menu.Items element still in DOM after closing?

[RobinMalfait]

Hmm it should be gone from the DOM, if not then that's a bug. Can you create a repro case on codesandbox?

Here is a version of the Menu component, and I don't see the Menu.Items in the DOM anymore. So feel free to take this as a starting point and see if you can reproduce the issue: https://codesandbox.io/s/headlessuireact-menu-example-forked-4qkht?file=/src/App.js:1135-1305

[rijk]

My apologies for the confusion, I meant the Virtual DOM. Here's a Sandbox: https://codesandbox.io/s/headlessuireact-menu-example-forked-jgpv8?file=/src/App.js

What I mean is visible below; with unmount set, I would expect Items to not exist in the Virtual DOM.

[RobinMalfait]

Yeah that's what I mean. The return null happens inside the Menu.Items component, so the DOM will be unmounted and all the react Menu.Item children but not the main Menu.Items component. You can't unmount a component from within a component.

function Button() {
  return null;
}

This Button won't render anything in the DOM, but it will still be in the React Tree.

[rijk]

Ok, and there's no way of doing in the Menu component? Because the state is tracked there, right?

[RobinMalfait]

Hey! Sorry that I didn't respond to the issue in a while.

Indeed, there is no other (good) solution to this as far as I know.
Another solution I know of is looping through all the children recursively and removing them but I don't think that's a good solution.

I'm afraid that you will need to keep using the solution with the more verbose syntax you initially used.

If other issues are present, feel free to open a new issue!