Filament中Repeater组件内数值输入框的显示问题解析

在Filament框架开发过程中，处理表单中的动态字段是一个常见需求。本文针对一个典型场景进行分析：当在Repeater组件中使用数值输入框(TextInput)时，字段值未能正确显示的问题。

问题现象

开发者在构建一个产品管理系统时，遇到了一个特殊问题。产品可以设置不同类型的折扣（百分比折扣或固定金额折扣），这些折扣通过Repeater组件以HasMany关系形式展示。当折扣类型为百分比时，使用TextInput显示数值；当为固定金额时，使用Money组件。

具体表现为：在创建产品并设置百分比折扣后，保存并重新打开编辑页面时，之前输入的折扣百分比值没有显示出来，而实际上数据已正确存储到数据库中。

问题根源分析

经过深入排查，发现问题并非出在Filament框架本身，而是由于表单设计上的一个常见误区：

1. 字段重复定义：表单中同时定义了两个名为"value"的字段（一个TextInput和一个Money），虽然通过hidden()方法控制了显示逻辑，但两者在DOM中同时存在

2. 隐藏字段的副作用：hidden()方法仅控制视觉显示，不会从DOM中移除元素。当两个同名字段共存时，浏览器会优先处理最后一个字段的值，导致前一个字段的值被覆盖

3. 动态字段处理不当：对于这种互斥显示的字段组，使用条件隐藏而非条件渲染的方式不够理想

解决方案

Filament提供了更优雅的动态字段处理方式，推荐使用Group组件配合闭包函数实现真正的条件渲染：

Group::make(function (Get $get) {
    if ($get('type') === DiscountType::PERCENTAGE->value) {
        return [
            TextInput::make('value')
                ->label('折扣值')
                ->suffix('%')
                ->inputMode('decimal')
                ->numeric()
                ->step(0.01)
                ->minValue(0)
                ->required()
        ];
    } else {
        return [
            Money::make('value')
                ->label('折扣值')
                ->default('0,00')
                ->required()
        ];
    }
}),

这种实现方式具有以下优势：

1. 真正的条件渲染：根据折扣类型只渲染对应的字段组件，避免DOM中存在重复字段

2. 代码结构清晰：逻辑集中在一个闭包中，便于维护和理解

3. 性能优化：减少了不必要的DOM元素，提升表单渲染效率

最佳实践建议

在Filament开发中处理类似场景时，建议遵循以下原则：

1. 避免同名字段共存：即使使用hidden()控制显示，也应避免在同一个表单中出现同名字段

2. 优先使用动态渲染：对于互斥显示的字段组，使用Group+闭包的动态渲染方式

3. 合理组织表单结构：将相关字段分组，保持代码的可读性和可维护性

4. 考虑用户体验：对于数值输入，明确指定inputMode、step等属性，确保移动端也能获得良好的输入体验

通过采用这些最佳实践，开发者可以避免类似问题的发生，构建出更加健壮和用户友好的Filament应用。