PasswordField Fix AdornmentIcon Not Showing (#192)

Author: mckaragoz

CodeBeam.MudBlazor.Extensions/Components/PasswordField/MudPasswordField.razor

@@ -19,43 +19,50 @@
                      ForId="@FieldId">
         <InputContent>
             <CascadingValue Name="Standalone" Value="false" IsFixed="true">
-                    <MudInputExtended T="string"
-                              @ref="InputReference"
-                              @attributes="UserAttributes"
-                              InputType="@_passwordInput"
-                              Lines="@Lines"
-                              Style="@Style"
-                              Variant="@Variant"
-                              TextUpdateSuppression="@TextUpdateSuppression"
-                              Value="@Text"
-                              ValueChanged="(s) => SetTextAsync(s)"
-                              Placeholder="@Placeholder"
-                              Disabled=@Disabled
-                              DisableUnderLine="@DisableUnderLine"
-                              ReadOnly="@ReadOnly"
-                              MaxLength="@MaxLength"
-                              Adornment="MudBlazor.Adornment.End"
-                              AdornmentIcon="@_passwordIcon"
-                              AdornmentColor="@AdornmentColor"
-                              AdornmentAriaLabel="@AdornmentAriaLabel"
-                              IconSize="@IconSize"
-                              OnAdornmentClick="AdornmentClick"
-                              Error="@Error"
-                              ErrorId="@ErrorId"
-                              Immediate="@Immediate"
-                              Margin="@Margin"
-                              OnBlur="@OnBlurredAsync"
-                              OnKeyDown="@InvokeKeyDown"
-                              OnInternalInputChanged="OnChange"
-                              OnKeyPress="@InvokeKeyPress"
-                              OnKeyUp="@InvokeKeyUp"
-                              KeyDownPreventDefault="KeyDownPreventDefault"
-                              KeyPressPreventDefault="KeyPressPreventDefault"
-                              KeyUpPreventDefault="KeyUpPreventDefault"
-                              HideSpinButtons="true"
-                              Clearable="@Clearable"
-                              OnClearButtonClick="@OnClearButtonClick"
-                              Pattern="@Pattern"/>
+                <MudInputExtended T="string"
+                                  @ref="InputReference"
+                                  @attributes="UserAttributes"
+                                  InputType="@_passwordInput"
+                                  Lines="@Lines"
+                                  Style="@Style"
+                                  Variant="@Variant"
+                                  TextUpdateSuppression="@TextUpdateSuppression"
+                                  Value="@Text"
+                                  ValueChanged="(s) => SetTextAsync(s)"
+                                  Placeholder="@Placeholder"
+                                  Disabled=@Disabled
+                                  DisableUnderLine="@DisableUnderLine"
+                                  ReadOnly="@ReadOnly"
+                                  MaxLength="@MaxLength"
+                                  AdornmentAriaLabel="@AdornmentAriaLabel"
+                                  Error="@Error"
+                                  ErrorId="@ErrorId"
+                                  Immediate="@Immediate"
+                                  Margin="@Margin"
+                                  OnBlur="@OnBlurredAsync"
+                                  OnKeyDown="@InvokeKeyDown"
+                                  OnInternalInputChanged="OnChange"
+                                  OnKeyPress="@InvokeKeyPress"
+                                  OnKeyUp="@InvokeKeyUp"
+                                  KeyDownPreventDefault="KeyDownPreventDefault"
+                                  KeyPressPreventDefault="KeyPressPreventDefault"
+                                  KeyUpPreventDefault="KeyUpPreventDefault"
+                                  HideSpinButtons="true"
+                                  Clearable="@Clearable"
+                                  OnClearButtonClick="@OnClearButtonClick"
+                                  Pattern="@Pattern">
+                    <AdornmentEnd>
+                        @if (CustomAdornment != null)
+                        {
+                            @CustomAdornment
+                        }
+                        else
+                        {
+                            <MudIconButton Icon="@_passwordIcon" Color="@AdornmentColor" Size="@IconSize" OnClick="AdornmentClick"></MudIconButton>
+                        }
+                    </AdornmentEnd>
+
+                </MudInputExtended>
             </CascadingValue>
         </InputContent>
     </MudInputControl>

CodeBeam.MudBlazor.Extensions/Components/PasswordField/MudPasswordField.razor.cs

@@ -44,6 +44,11 @@ public partial class MudPasswordField<T> : MudDebouncedInput<T>
         /// </summary>
         [Parameter] public EventCallback<MouseEventArgs> OnClearButtonClick { get; set; }
 
+        /// <summary>
+        /// RenderFragment for end adornment.
+        /// </summary>
+        [Parameter] public RenderFragment CustomAdornment { get; set; }
+
         public override ValueTask FocusAsync()
         {
             return InputReference.FocusAsync();

ComponentViewer.Docs/Pages/Examples/PasswordFieldExample1.razor

@@ -1,11 +1,16 @@
 <MudGrid>
-    <MudItem Class="d-flex gap-4 align-center flex-wrap">
-        <MudPasswordField @bind-Value="@_password" @bind-PasswordMode="@_passwordMode" Variant="Variant.Outlined" />
-        <MudSwitch @bind-Checked="_passwordMode" Color="Color.Primary">Password Mode</MudSwitch>
+    <MudItem xs="12" sm="8" Class="d-flex align-center">
+        <MudPasswordField @bind-Value="@_password" @bind-PasswordMode="@_passwordMode" Variant="Variant.Outlined" IconSize="_size" />
+    </MudItem>
+
+    <MudItem xs="12" sm="4">
+        <MudSwitchM3 @bind-Checked="_passwordMode" Color="Color.Secondary">Password Mode</MudSwitchM3>
+        <MudSelectExtended @bind-Value="_size" ItemCollection="Enum.GetValues<Size>()" Label="Icon Size" Variant="Variant.Outlined" />
     </MudItem>
 </MudGrid>
 
 @code{
     string _password = "asdf";
     bool _passwordMode;
+    Size _size = Size.Medium;
 }