Chakra UI搜索组件：如何在InputRightElement中放置两个IconButton

问题重现 #

在基于Chakra UI开发搜索组件时，尝试在InputGroup的单个InputRightElement中放置两个IconButton，但第二个按钮会超出输入框范围。原始代码如下：

<InputGroup size="lg" shadow="md" borderRadius="80px">
    <Input
        ref={searchInputRef}
        type="text"
        borderRadius="80px" 
        placeholder="Search" 
        defaultValue={router.query.searchInput}
    />
    <InputRightElement>
        <IconButton
            icon={<GrFormClose />}
            onClick={() => (searchInputRef.current.value = "")}
        >
        </IconButton>
        <IconButton 
            onClick={() => {} } 
            colorScheme="gray"
            aria-label="Search"
            isRound="true"
            icon={<Search2Icon />}
            size="sm"
            ></IconButton>
    </InputRightElement>
</InputGroup>

当前效果：第二个搜索按钮超出输入框右侧边界。

解决方法 #

问题核心是InputRightElement默认宽度不足以容纳两个按钮，且按钮布局未做控制。通过以下调整解决：

1. 给InputRightElement设置自适应宽度和合适内边距，确保能容纳两个按钮
2. 使用Flex容器包裹按钮，控制间距与对齐方式
3. 统一按钮尺寸，匹配InputGroup的size="lg"规格
4. 调整输入框右内边距，避免输入内容被按钮遮挡

修改后的完整代码：

<InputGroup size="lg" shadow="md" borderRadius="80px">
    <Input
        ref={searchInputRef}
        type="text"
        borderRadius="80px" 
        placeholder="Search" 
        defaultValue={router.query.searchInput}
        pr="100px" // 增加右内边距，防止内容被按钮遮挡
    />
    <InputRightElement w="fit-content" pr="4"> // 设置宽度自适应，调整内边距
        <Flex gap="2"> // 用Flex容器控制按钮间距
            <IconButton
                icon={<GrFormClose />}
                onClick={() => (searchInputRef.current.value = "")}
                size="md" // 匹配InputGroup尺寸，统一按钮大小
                variant="ghost" // 可选：幽灵按钮样式减少空间占用
            />
            <IconButton 
                onClick={() => {} } 
                colorScheme="gray"
                aria-label="Search"
                isRound
                icon={<Search2Icon />}
                size="md" // 统一按钮尺寸
            />
        </Flex>
    </InputRightElement>
</InputGroup>

关键调整说明 #

• InputRightElement w="fit-content"：让容器宽度自适应内部按钮总宽度，突破默认宽度限制
• Flex gap="2"：给按钮添加合理间距，避免拥挤
• Input pr="100px"：保证输入文字不会被右侧按钮覆盖
• 统一IconButton的size="md"：与InputGroup的lg尺寸视觉协调，避免按钮尺寸过大导致溢出

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