Hover randomly gets locked on Popover

[Madhavkabra]

When using a Popover component, sometimes hover state of the component gets locked, and the popover does not close.

[blvdmitry]

Hey, can you provide a code snippet of this popover and how you're reproducing this? Is it just a default popover behavior and does the same happen for you on our documentation website?

[Madhavkabra]

Here is the code snippet for the same

<Popover
      position="bottom"
      forcePosition
      key={products.length}
      triggerType="hover"
      padding={3}
    >
      <Popover.Trigger>
        {(attributes) => {
          return (
            <Actionable attributes={attributes}>
              <View height={30} width={15}>
                <ToothContainer customStyles="!w-full pointer-events-none">
                  <Tooth
                    variant={tooth.toothVariant}
                    tooth={tooth.toothNumber}
                    className={
                      selected ? styles.activeTooth : styles.inactiveTooth
                    }
                  >
                    <Root
                      tooth={tooth.toothNumber}
                      variant={tooth.rootVariant}
                    />
                    <Crown
                      tooth={tooth.toothNumber}
                      variant={tooth.crownVariant}
                      leftAnchor={tooth.leftAnchor}
                      rightAnchor={tooth.rightAnchor}
                    />
                  </Tooth>
                  {selected && (
                    <View
                      position="absolute"
                      width="100%"
                      height="100%"
                      direction="row"
                      align="center"
                      justify="center"
                      className="[&_svg>*]:!stroke-[--rs-color-background-page] [&_svg>*]:!fill-[--rs-color-background-primary]"
                    >
                      <Icon svg={TickIcon} size={6} color="primary" />
                    </View>
                  )}

                  <ToothNumber
                    tooth={tooth.toothNumber}
                    jawType={JawType.UPPER}
                  />
                </ToothContainer>
              </View>
            </Actionable>
          );
        }}
      </Popover.Trigger>
      <Popover.Content
        className={
          products.length
            ? 'visible !max-h-[calc(100vh-248px)] !overflow-y-auto'
            : 'hidden'
        }
      >
        <View divided gap={4.25}>
          {products.map(({ selectedProduct }) => {
            const localization = selectedProduct?.localizations?.[1];

            return (
              <View
                key={selectedProduct?.id as string}
                align="start"
                direction="row"
                gap={8}
                wrap={false}
              >
                <Image
                  src={selectedProduct?.image}
                  alt={selectedProduct?.image}
                  height="48px"
                  width="48px"
                  borderRadius="medium"
                />

                <View gap={1} width={58} textAlign="start">
                  <Text variant="body-3" weight="bold">
                    {localization?.name}
                  </Text>

                  <Text
                    variant="caption-1"
                    weight="regular"
                    color="neutral-faded"
                  >
                    {localization?.description}
                  </Text>
                </View>
              </View>
            );
          })}
        </View>
      </Popover.Content>
    </Popover>```

[blvdmitry]

Trying to reproduce it here: https://codesandbox.io/s/popover-trigger-type-bug-report-4vzjjj Is it reproducing for you there or can you fork and edit this example?

[blvdmitry]

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