I am working on a Shopify app using Remix and @shopify/app-bridge-react (version 4.1.6). I have created a modal using the App Bridge React Modal component, and it's working fine. Inside this modal, I want to show a color picker when a button is clicked. To achieve this, I have:

1. Used the Polaris Color Picker component (Polaris Color Picker)
2. Wrapped it inside a Popover (Polaris Popover)

The color picker opens fine when clicking on the popover. However, the issue is that the color picker's small round selector does not move when dragged. It only moves when I click directly on the color palette, but dragging doesn't work.

Here’s a screen recording demonstrating the issue: Video Link

Modal Component

const [color, setColor] = useState('#FF5733');

<div>
  <Modal id="IntegrationConnectModal">
    <AppProvider i18n={{}}>
      <Box padding="400">
        <BlockStack gap="400">
          <ColorPickerPopover
            label="Pick a color"
            name="color"
            value={color}
            onChange={setColor} // Updates state with the new color
            required
          />
        </BlockStack>
      </Box>
    </AppProvider>
  </Modal>
</div>

Color Picker Component

import { ColorPicker as PolarisColorPicker, Popover, Button, InlineStack } from "@shopify/polaris";
import React, { useState } from "react";

export default function ColorPickerPopover({ label, name, required = false, onChange, value }) {
  const [isPopoverVisible, setIsPopoverVisible] = useState(false);

  const [color, setColor] = useState({
    hue: 120,
    brightness: 1,
    saturation: 1,
  });

  const handleColorChange = (newColor) => {
    setColor(newColor); // Update state
  };

  return (
    <Popover
      active={isPopoverVisible}
      autofocusTarget="none"
      onClose={() => setIsPopoverVisible(false)}
      preferredPosition="above"
      preventCloseOnChildOverlayClick
      activator={
        <Button onClick={() => setIsPopoverVisible(true)} disclosure>
          <InlineStack align="center">
            <div
              style={{
                width: "24px",
                height: "24px",
                borderRadius: "50%",
              }}
            />
          </InlineStack>
        </Button>
      }
    >
      <PolarisColorPicker color={color} onChange={handleColorChange} />
    </Popover>
  );
}

Issue:

• The color picker opens inside the popover correctly.
• Clicking on a color changes the selector position.
• Dragging the selector does not work.

What I’ve Tried:

• Ensured the color picker works outside the modal (it works fine).
• Wrapped the popover correctly around the color picker.
• Checked for potential CSS issues or z-index problems.