Another easy Menu question! #7022

NickWoodward · 2024-09-11T16:01:51Z

NickWoodward
Sep 11, 2024

*Edit: Because I couldn't replicate the problem I've got a really small git repo demonstrating it with a basic setup if someone doesn't mind taking a look? https://github.com/NickWoodward/react-aria-menu/tree/master

Sorry, another menu question! I just really can't see why I'm having this issue. Adding the menu to my fixed header and opening it basically pushes the whole body of the document to the left (the red border is on the body tag), even though the popover has a position of absolute:

Page structure:

<body class="bg-slate-600 border-4 border-red-500">
  <Header client:visible />
  <main>
    <section class="h-screen bg-slate-300"></section>
  </main>
</body>

The Header component is identical in my main project and this stackblitz: https://stackblitz.com/edit/withastro-astro-ahpkff?file=src%2Fcomponents%2FHeader.tsx

// Header

import { useRef, type ComponentProps } from 'react';
import { cn } from '../utils/utils';

import { MobileMenu } from './MobileMenu';

interface Props extends ComponentProps<'div'> {}

export const Header = ({ className, children }: Props) => {
  const container = useRef<HTMLDivElement>(null);

  return (
    <div
      ref={container}
      className={cn(
        `header-wrapper 
        fixed inset-x-0 h-header
        flex items-center justify-between px-2
        z-50`,
        className
      )}
    >
      <div className="header-background invisible absolute bg-slate-700 inset-0 "></div>
      {children}
      <div>LOGO</div>
      <div className="text-slate-200">LOGO</div>

      <MobileMenu />
    </div>
  );
};

// Menu

import {
  MenuTrigger,
  Button,
  Popover,
  Menu,
  MenuItem,
} from "react-aria-components";

export const MobileMenu = () => {
  return (
    <MenuTrigger>
      <Button aria-label="Menu" className={"text-slate-200 "}>
        ☰
      </Button>
      <Popover className="bg-slate-300">
        <Menu className=" px-4 py-2.5">
          <MenuItem onAction={() => alert("open")}>Open</MenuItem>
          <MenuItem onAction={() => alert("rename")}>Rename…</MenuItem>
          <MenuItem onAction={() => alert("duplicate")}>Duplicate</MenuItem>
          <MenuItem onAction={() => alert("share")}>Share…</MenuItem>
          <MenuItem onAction={() => alert("delete")}>Delete…</MenuItem>
        </Menu>
      </Popover>
    </MenuTrigger>
  );
};

Know it's difficult to help without a broken example, but I've tried recreating it in a stackblitz and as you can see it works fine there - the Popover positions itself away from the edge of the document :/

In case gifs help:

snowystinger · 2024-09-13T08:14:52Z

snowystinger
Sep 13, 2024
Maintainer

Unfortunately, nothing jumped out of at me with a quick glance. Thanks for providing the stackblitz though. Hopefully one of us will have more time to dive into it at some point if you don't solve it before then.

1 reply

NickWoodward Sep 14, 2024
Author

Hi Robert, thanks for the reply.
Yeah I'll keep at it, but each time I rebuild the project I get the same issue, so am a bit stuck. Maybe looking at it fresh will help! I spend a bit of time in the astro discord too, so I'll see if anyone there can see anything obvious too.

Nick

NickWoodward · 2024-11-15T12:52:30Z

NickWoodward
Nov 15, 2024
Author

hi all - wanted to give react-aria another try and ran into this issue again that I never managed to sort.

i've got a little further in that i've narrowed it down to inspecting the page using the device toolbar

if you look at the attached gif you'll see that the pop-over's left property seems to be wrong when opening. clicking it once recalculated it correctly, clicking again removes the property. re-opening the menu resets it back to the incorrect value.

menu-issue.mp4

live example here: https://react-aria-menu.pages.dev/

any ideas would be much appreciated! :)

1 reply

snowystinger Nov 19, 2024
Maintainer

Thanks for the demo, I'm not sure why it's behaving differently in the device simulator compared to the standard browser window. I don't know what astro does, but is this reproducible outside of astro with just tailwind? or is it reproducible without tailwind and using something else?
I think we need to start eliminating some aspects of this setup.

NickWoodward · 2024-11-19T23:02:52Z

NickWoodward
Nov 19, 2024
Author

No worries. Set up a quick project with vite + react, and vite + react + tailwind - Both seemed to work. But I did manage to reproduce the problem (with and without tailwind) when resizing the window in device sim mode. Obviously that's not a problem because who needs to do that keeping the menu open, but perhaps it suggests that astro is resizing the window? (although astro in stackblitz doesn't have this problem at all) Bit confused now tbh. I might just drop in the menu to a finished/deployed project and see if it does this on actual devices. If it's just a bug in development I guess it doesn't really matter.

…

________________________________ From: Robert Snow ***@***.***> Sent: 19 November 2024 19:59 To: adobe/react-spectrum ***@***.***> Cc: NickWoodward ***@***.***>; Author ***@***.***> Subject: Re: [adobe/react-spectrum] Another easy Menu question! (Discussion #7022) Thanks for the demo, I'm not sure why it's behaving differently in the device simulator compared to the standard browser window. I don't know what astro does, but is this reproducible outside of astro with just tailwind? or is it reproducible without tailwind and using something else? I think we need to start eliminating some aspects of this setup. — Reply to this email directly, view it on GitHub<#7022 (reply in thread)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AD4KV2TMG5REMKLNPXU65HT2BOKCBAVCNFSM6AAAAABOBJOJVCVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTCMZRGA4TANI>. You are receiving this because you authored the thread.Message ID: ***@***.***>

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Another easy Menu question! #7022

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 3 comments 2 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Another easy Menu question! #7022

NickWoodward Sep 11, 2024

Replies: 3 comments · 2 replies

snowystinger Sep 13, 2024 Maintainer

NickWoodward Sep 14, 2024 Author

NickWoodward Nov 15, 2024 Author

snowystinger Nov 19, 2024 Maintainer

NickWoodward Nov 19, 2024 Author

NickWoodward
Sep 11, 2024

Replies: 3 comments 2 replies

snowystinger
Sep 13, 2024
Maintainer

NickWoodward Sep 14, 2024
Author

NickWoodward
Nov 15, 2024
Author

snowystinger Nov 19, 2024
Maintainer

NickWoodward
Nov 19, 2024
Author