Menu.Root and Menu.Trigger breaks flex layout for trigger child

[arcln]

Hello again,

I'm trying to expand the child of Trigger using flex: 1 but I can't get it working.

I have the following sample code :

<View
  style={{
    display: 'flex',
    width: 300,
    height: 300,
    backgroundColor: 'red',
  }}
>
  <DropdownMenu.Root style={{ flex: 1 }}>
    <DropdownMenu.Trigger style={{ flex: 1 }}>
      <View
        style={{
          flex: 1,
          backgroundColor: 'blue',
        }}
      />
    </DropdownMenu.Trigger>
  </DropdownMenu.Root>
</View>

In such case I expect to see a blue square, but I see a red square (i.e., blue square should fill the red square, but doesn't).

If I replace DropdownMenu.Root and DropdownMenu.Trigger by View, I see the blue square.

How can I achieve this please?

[arcln]

Hello, I'm stuck because of this problem, I may be interested into making a PR for it. Would you mind giving me a bit of advice regarding where to look and roughly what needs to be done to get this working?

[nandorojo]

root shouldn’t receive any style. what platform is this on?

[nandorojo]

i see, the issue is that on iOS and Android we aren’t rendering a node for the trigger — only on web. this is probably wrong, we should add a view with style here https://github.com/nandorojo/zeego/blob/4e094b1abc86898f468cee3f6f717c943753a502/packages/zeego/src/menu/create-ios-menu/index.ios.tsx#L40

[arcln]

I am on seeing this on Android and iOS so I think you're right. Do you want me to make a PR ?

[nandorojo]

Weird, looks like the styles do apply on Android currently. It happens there too?

[nandorojo]

Let me know if 1.5.2 fixes this.

[arcln]

Hello again, I upgraded to zeego v1.7.2, this issue stills happens on both Android and iOS. You can run the example code provided in my original comment to reproduce it. I tried witth and without the new asChild prop, but it doesn't change anything.