React Mantine：如何将Popover按钮置于Autocomplete输入框左侧边框内？

要把带Popover的疑问按钮放到Autocomplete输入框的左侧边框内，核心是让按钮融入输入框的flex布局结构里，以下是两种可行方案：

方案一：利用Autocomplete自带的leftSection属性（推荐） #

Mantine的Autocomplete组件提供了leftSection属性，专门用于在输入框左侧添加自定义元素，无需大幅修改现有样式：

1. 引入所需组件：

import { Popover, PopoverTarget, PopoverDropdown, PopoverContent, IconButton } from '@mantine/core';
import { QuestionMarkIcon } from '@mantine/icons';

2. 修改ApprovalStatus组件：

export const ApprovalStatus: React.FC<GenericInputFormProps> = ({
  label,
  placeholder,
  index,
}) => {
  const { classes } = useStyles({ opened: false }); // 根据实际状态传入opened值
  const [value, setValue] = useState('');
  // ... 你的数据获取逻辑

  return (
    <Autocomplete
      maxDropdownHeight="280px"
      label={label}
      limit={20}
      placeholder={placeholder}
      className={classes.control}
      value={value}
      onChange={setValue}
      data={flatData}
      // 添加左侧疑问按钮
      leftSection={
        <Popover>
          <PopoverTarget>
            <IconButton
              variant="subtle"
              size="xs"
              icon={<QuestionMarkIcon />}
              aria-label="输入框要求说明"
            />
          </PopoverTarget>
          <PopoverDropdown>
            <PopoverContent width={240}>
              <p>这里填写输入框的详细要求，比如格式、可选值说明等</p>
            </PopoverContent>
          </PopoverDropdown>
        </Popover>
      }
      // 调整左侧元素与输入文本的间距
      leftSectionProps={{ style: { marginRight: '8px' } }}
    />
  );
};

3. 微调自定义样式：
   如果按钮和输入框内容的对齐有问题，可修改control类的padding，给左侧按钮留出合适空间：

const useStyles = createStyles((theme, { opened }: { opened: boolean }) => ({
  control: {
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    // 调整左侧padding，适配按钮尺寸
    padding: `${theme.spacing.xs} ${theme.spacing.md} ${theme.spacing.xs} ${theme.spacing.sm}`,
    borderRadius: theme.radius.md,
    border: `${rem(1)} solid ${theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[2]}`,
    transition: "background-color 150ms ease",
  },
  // ... 其他样式不变
}));

方案二：自定义输入框结构（更灵活） #

如果需要完全控制输入框的布局，可使用Autocomplete的renderInput属性自定义整个输入区域：

1. 修改组件代码：

export const ApprovalStatus: React.FC<GenericInputFormProps> = ({
  label,
  placeholder,
  index,
}) => {
  const { classes } = useStyles({ opened: false });
  const [value, setValue] = useState('');
  const [opened, setOpened] = useState(false);
  // ... 你的数据逻辑

  return (
    <Autocomplete
      maxDropdownHeight="280px"
      label={label}
      limit={20}
      placeholder={placeholder}
      value={value}
      onChange={setValue}
      data={flatData}
      opened={opened}
      onDropdownOpen={() => setOpened(true)}
      onDropdownClose={() => setOpened(false)}
      // 自定义输入框结构
      renderInput={(props) => (
        <div className={classes.control}>
          {/* 左侧疑问按钮 */}
          <Popover>
            <PopoverTarget>
              <IconButton
                variant="subtle"
                size="xs"
                icon={<QuestionMarkIcon />}
                aria-label="输入框要求说明"
              />
            </PopoverTarget>
            <PopoverDropdown>
              <PopoverContent width={240}>
                <p>这里填写输入框的详细要求</p>
              </PopoverContent>
            </PopoverDropdown>
          </Popover>
          {/* 输入框主体 */}
          <input
            {...props}
            className={classes.input}
            placeholder={placeholder}
          />
          {/* 右侧下拉图标 */}
          <ChevronDownIcon className={classes.icon} />
        </div>
      )}
    />
  );
};

2. 添加输入框样式：
   在useStyles中新增input类，确保输入区域占满剩余空间：

const useStyles = createStyles((theme, { opened }: { opened: boolean }) => ({
  control: {
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    padding: `${theme.spacing.xs} ${theme.spacing.md}`,
    borderRadius: theme.radius.md,
    border: `${rem(1)} solid ${theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[2]}`,
    transition: "background-color 150ms ease",
    gap: theme.spacing.xs,
  },
  input: {
    flex: 1,
    border: 'none',
    outline: 'none',
    background: 'transparent',
    fontSize: theme.fontSizes.sm,
    color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.colors.gray[9],
  },
  // ... 其他样式不变
}));

为什么之前按钮会显示在输入框上方？ #

你之前的实现应该是把Popover按钮直接放在Autocomplete组件外部，没有融入到输入框的flex布局中，导致按钮脱离了输入框的容器，自然会出现在上方或换行。通过上述两种方式，将按钮嵌入到输入框的内部布局里，就能实现“在左侧边框内”的效果。

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