App Bridge Modal内Polaris颜色选择器拖拽失效问题

我正在使用Remix和@shopify/app-bridge-react（4.1.6版本）开发Shopify应用，已经通过App Bridge React Modal组件创建了能正常工作的弹窗。在弹窗内部，我通过Polaris Color Picker组件结合Polaris Popover实现了点击按钮唤起颜色选择器的功能。目前颜色选择器可以正常唤起，点击调色板也能切换颜色，但拖拽颜色选择器的圆形小滑块时无法移动。

相关组件代码 #

Modal组件代码 #

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>

ColorPickerPopover组件代码 #

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>
  );
}

已尝试的解决方法 #

• 确认颜色选择器在Modal外可正常拖拽
• 确认Popover正确包裹颜色选择器
• 排查CSS样式及z-index问题

内容的提问来源于stack exchange，提问作者Ronak Panchal