Visual bug when RadzenFileInput Disabled in RadzenFormField

Radzen.Blazor Components
1

Hi, i got a problem with disabling RadzenFileInput when it in RadzenFormField

photo_2024-03-22_14-14-56

Code:

@using RadzenBlazorDemos.Data
@using RadzenBlazorDemos.Models.Northwind

@inherits DbContextPage

<div class="container-fluid">
    <div class="row px-3">
        <div class="col-lg-6 offset-lg-3 p-3">
            <RadzenButton Click=@(() => isDisabled = !isDisabled) />
            <RadzenCard>
                <RadzenFormField Text="File" style="width: 100%;">
                    <ChildContent>
                        <RadzenFileInput @bind-Value=@firstEmployee.Photo @bind-FileName=@fileName @bind-FileSize=@fileSize TValue="string" class="w-100" Disabled=@(isDisabled) Style="width: 100%; text-align-last: end;"
                            Change=@(args => OnChange(args, "FileInput")) Error=@(args => OnError(args, "FileInput")) InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", "select file" }})"/>
                    </ChildContent>
                </RadzenFormField>
            </RadzenCard>
        </div>
    </div>
</div>

<EventConsole @ref=@console />

@code {
    Employee firstEmployee;
    EventConsole console;

    bool isDisabled = false;
    
    string fileName;
    long? fileSize;

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        firstEmployee = await Task.FromResult(dbContext.Employees.FirstOrDefault());
    }

    void OnChange(string value, string name)
    {
        console.Log($"{name} value changed");
    }

    void OnError(UploadErrorEventArgs args, string name)
    {
        console.Log($"{args.Message}");
    }
}
2

Hi @Vitaliy_Tkachenko,

RadzenFileInput is not designed to be placed inside a RadzenFormField. Yet, we'd consider it a bug that we've managed to reproduce. Should be fixed with the next release of Radzen.Blazor.

Until then, these styles should help you fix it on your side:

.rz-form-field .rz-fileupload-choose input[type=file]:disabled {
    opacity: 0;
}

.rz-form-field .rz-button.rz-secondary.rz-state-disabled {
    color: var(--rz-on-secondary);
    opacity: var(--rz-button-disabled-opacity);
}
1 Like