Correctly manage values on select field

LiamMorrow · Nov 15, 2024 · e0652a5 · e0652a5
1 parent a5dceb8
commit e0652a5
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 12 deletions.
diff --git a/LiftLog.Ui/Pages/Settings/BackupAndRestore/PlainTextExportPage.razor b/LiftLog.Ui/Pages/Settings/BackupAndRestore/PlainTextExportPage.razor
@@ -15,7 +15,7 @@
 
 <LabelledForm>
     <LabelledFormRow Label="Format" Icon="description">
-        <SelectField data-cy="export-format-selector" T="PlaintextExportFormat" Options="Formats" Value="Format" ValueChanged="SelectFormat"/>
+        <SelectField data-cy="export-format-selector" Options="Formats" Value="@Format.ToString()" ValueChanged="SelectFormat"/>
     </LabelledFormRow>
 </LabelledForm>
 
@@ -27,7 +27,7 @@
 @code {
 
     private PlaintextExportFormat Format = PlaintextExportFormat.CSV;
-    private List<SelectField<PlaintextExportFormat>.SelectOption> Formats = [new("CSV", PlaintextExportFormat.CSV)];
+    private List<SelectField.SelectOption> Formats = Enum.GetValues<PlaintextExportFormat>().Select(x=>new SelectField.SelectOption(x.ToString(), x.ToString())).ToList();
 
     protected override void OnInitialized()
     {
@@ -36,9 +36,9 @@
         base.OnInitialized();
     }
 
-    private void SelectFormat(PlaintextExportFormat format)
+    private void SelectFormat(string format)
     {
-        Format = format;
+        Format = Enum.Parse<PlaintextExportFormat>(format);
         StateHasChanged();
     }
 

diff --git a/LiftLog.Ui/Shared/Presentation/SelectField.razor b/LiftLog.Ui/Shared/Presentation/SelectField.razor
@@ -1,22 +1,21 @@
 @inject IJSRuntime JsRuntime
-@typeparam T
 
 @switch(TextFieldType){
     case TextFieldType.Outlined:
-        <md-outlined-select value=@Value @attributes="AdditionalAttributes" @onchange="e=>ValueChanged.InvokeAsync(e.Value)" >
+        <md-outlined-select @attributes="AdditionalAttributes" @onchange="e=>ValueChanged.InvokeAsync((string)e.Value!)" >
             @foreach (var option in Options)
             {
-                <md-select-option value="@option.Value">
+                <md-select-option selected=@(option.Value == Value) value="@option.Value">
                     <div slot="headline">@option.Title</div>
                 </md-select-option>
             }
         </md-outlined-select>
         break;
     case TextFieldType.Filled:
-        <md-filled-select value=@Value @attributes="AdditionalAttributes" @onchange="e=>ValueChanged.InvokeAsync(e.Value)">
+        <md-filled-select @attributes="AdditionalAttributes" @onchange="e=>ValueChanged.InvokeAsync((string)e.Value!)">
             @foreach (var option in Options)
             {
-                <md-select-option value="@option.Value">
+                <md-select-option selected=@(option.Value == Value) value="@option.Value">
                     <div slot="headline">@option.Title</div>
                 </md-select-option>
             }
@@ -29,15 +28,15 @@
 
 
 @code {
-    [Parameter] [EditorRequired] public T Value { get; set; } = default!;
+    [Parameter] [EditorRequired] public string Value { get; set; } = default!;
 
     [Parameter] [EditorRequired] public List<SelectOption> Options { get; set; } = null!;
 
-    [Parameter] [EditorRequired] public EventCallback<T> ValueChanged { get; set; }
+    [Parameter] [EditorRequired] public EventCallback<string> ValueChanged { get; set; }
 
     [Parameter] public TextFieldType TextFieldType { get; set; } = TextFieldType.Outlined;
 
     [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }
 
-    public record SelectOption(string Title, T Value);
+    public record SelectOption(string Title, string Value);
 }