Dropdown options get hidden randomly

[Madhavkabra]

List of options in the Dropdown menu get hidden randomly, i.e they can not be seen but they can be interacted with, and the mouse still changes with the hover and clicking options works.

[blvdmitry]

Hey, can you provide a code snippet of the dropdown you have?

[Madhavkabra]

Here is the code snippet for the same

<DropdownMenu width="trigger">
                <DropdownMenu.Trigger>
                  {(attributes) => (
                    <Select
                      name={field.name}
                      inputAttributes={attributes}
                      placeholder={values[field.name]}
                      value={values[field.name]}
                    />
                  )}
                </DropdownMenu.Trigger>
                <DropdownMenu.Content>
                  {field.options.map(({ isAvailable, name, value }) => (
                    <DropdownMenu.Item
                      key={value}
                      onClick={() => onChangeValue(field.name, value)}
                    >
                      <Text color={!isAvailable ? 'disabled' : 'neutral'}>
                        {name}
                      </Text>
                    </DropdownMenu.Item>
                  ))}
                </DropdownMenu.Content>
              </DropdownMenu>```

[blvdmitry]

Trying to reproduce with the follow example and it seems to work as expected. I had to remove all external variables and function calls though so it might be happening because of the onChangeValue logic. Also what looks strange to me is that you're changing the text color to disabled but you're not adding disabled flag to the DropdownMenu.Item.

Can you help me narrow the reproduction case down to where it's not working but is not relying on the external logic?

import { Reshaped, DropdownMenu, Select, Text, View } from "reshaped";
import "reshaped/themes/reshaped/theme.css";

export default function App() {
  return (
    <Reshaped theme="reshaped">
      <View padding={4}>
        <DropdownMenu width="trigger">
          <DropdownMenu.Trigger>
            {(attributes) => (
              <Select
                name="hey"
                inputAttributes={attributes}
                placeholder="Hey"
                value="Hey"
              />
            )}
          </DropdownMenu.Trigger>
          <DropdownMenu.Content>
            {[
              { name: "1", value: "1", isAvailable: true },
              { name: "2", value: "2" }
            ].map(({ isAvailable, name, value }) => (
              <DropdownMenu.Item key={value}>
                <Text color={!isAvailable ? "disabled" : "neutral"}>
                  {name}
                </Text>
              </DropdownMenu.Item>
            ))}
          </DropdownMenu.Content>
        </DropdownMenu>
      </View>
    </Reshaped>
  );
}

[blvdmitry]

Closing this for now since it's getting stale, let me know if you can reproduce this again

[ForrestCogna]

@blvdmitry I have also run into this issue but it has been difficult to isolate. However, some additional clues:

• Occurs when clicking an item to close the content menu only when dropdownmenu.trigger is in bottom 50% of container
• a scaled-down, opacity: 0 version of the dropdown menu is added to the dom and blocks events in elements behind the hidden dropdownmenu content popover

[blvdmitry]

Let me try to investigate it again. If you have any code snippet you can share - that would help a lot

[larsmennen]

@blvdmitry I don't have an isolated example to reproduce unfortunately, but I think it's related to the transitionend event not firing on the content div, which then leaves it in a hidden state. If I manually force a transform transition by adding it from the Dev Tools it correctly removes the hidden div. I'm not sure why that event isn't being fired.

I only seem to be able to run into the issue if the triggering button is very close to the bottom of my viewport.

We found a workaround now by setting disableHideAnimation={true} on DropdownMenu. I think that option is undocumented (or at least I couldn't find it), so that may be worth adding to the docs?

[blvdmitry]

Looking at this again, @larsmennen @Madhavkabra do you maybe have a video demo of how this issue looks visually?

[blvdmitry]

Goin to close this for now due to inactivity and not being able to reproduce it, let's reopen it again if it's still an issue