Fix Clear Button Show on ReadOnly Components (#620)

Author: mckaragoz

docs/CodeBeam.MudBlazor.Extensions.Docs.Wasm/wwwroot/CodeBeam.MudBlazor.Extensions.xml

@@ -7,7 +7,7 @@
 @inject IKeyInterceptorService KeyInterceptorService
 @inject IScrollManagerExtended ScrollManagerExtended
 
-<CascadingValue Name="Standalone" Value="false" IsFixed="true">
+<CascadingValue Name="SubscribeToParentForm" Value="false" IsFixed="true">
     <CascadingValue Value="@this" IsFixed="true">
         <div class="mud-select-extended" id="@_elementId">
             <MudInputControl Label="@Label" Variant="@Variant" HelperText="@HelperText" HelperTextOnFocus="@HelperTextOnFocus" FullWidth="@FullWidth" Margin="@Margin" Class="@Classname" Style="@Style"
@@ -22,7 +22,7 @@
                                       Underline="@Underline"
                                       HasAdornmentStart="@(AdornmentStart != null)" HasAdornmentEnd="@(AdornmentEnd != null)"
                                       Disabled="@GetDisabledState()" ReadOnly="@GetReadOnlyState()" Error="@ErrorState.Value" ErrorId="@ErrorIdState.Value"
-                                      Clearable="@Clearable" ForceClearable="@(Clearable && HasValue(ReadValue))" OnClearButtonClick="@ClearButtonClickHandlerAsync"
+                                      Clearable="@(Clearable && !GetReadOnlyState())" ForceClearable="@ForceClearable" OnClearButtonClick="@ClearButtonClickHandlerAsync"
                                       MaxLength="@MaxLength" @attributes="UserAttributes" OnBlur="@HandleOnBlur" ShrinkLabel="@(HasValue(ReadValue) || AdornmentStart != null || _isOpen || ShrinkLabel)">
 
                         <AdornmentStart>

src/CodeBeam.MudBlazor.Extensions/Components/ComboBox/MudComboBox.razor

@@ -379,6 +379,13 @@ protected internal void SetSearchString(T value)
         //[Category(CategoryTypes.List.Behavior)]
         //public bool Virtualize { get; set; }
 
+        /// <summary>
+        /// If true, clear button forced to show even on readonly or disabled ComboBox.
+        /// </summary>
+        [Parameter]
+        [Category(CategoryTypes.List.Behavior)]
+        public bool ForceClearable { get; set; }
+
         /// <summary>
         /// If true, chips has close button and remove from SelectedValues when pressed the close button.
         /// </summary>
@@ -757,6 +764,7 @@ protected override void OnInitialized()
         bool _oldShowCheckbox = true;
         bool _oldBordered;
         Dense _oldDense = Dense.Standard;
+        bool _oldReadonly;
         /// <summary>
         /// 
         /// </summary>
@@ -765,14 +773,16 @@ protected override void OnParametersSet()
             base.OnParametersSet();
             if (_oldShowCheckbox != ShowCheckbox ||
                 _oldBordered != Bordered ||
-                _oldDense != Dense)
+                _oldDense != Dense ||
+                _oldReadonly != ReadOnly)
             {
                 ForceRenderItems();
             }
             _oldShowCheckbox = ShowCheckbox;
             _oldBordered = Bordered;
             _oldDense = Dense;
             _allSelected = GetAllSelectedState();
+            _oldReadonly = ReadOnly;
         }
 
         bool _firstRendered = false;

src/CodeBeam.MudBlazor.Extensions/Components/ComboBox/MudComboBox.razor.cs

@@ -316,35 +316,29 @@ public override ValueTask SelectRangeAsync(int pos1, int pos2)
 
         private Size GetButtonSize() => Margin == Margin.Dense ? Size.Small : Size.Medium;
 
-        //private bool _showClearable;
-
         private void UpdateClearable(object? value)
         {
             var showClearable = HasValue((T?)value);
             if (Clearable != showClearable)
                 Clearable = showClearable;
         }
 
-        //private bool GetClearable() => Clearable && ((ReadValue is string stringValue && !string.IsNullOrWhiteSpace(stringValue)) || (ReadValue is not string && ReadValue is not null));
-
         private bool ShowClearButton()
         {
             if (GetDisabledState())
             {
                 return false;
             }
 
-            if (!Clearable)
+            if (SubscribeToParentForm && GetReadOnlyState())
             {
                 return false;
             }
 
-            // TODO: Add SubscribeToParentForm and GetReadOnlyState from MudBaseInput when Mud 9 released, it's currently internal
-            // Select extended is currently hardcoded readonly true, do not uncomment
-            //if (ReadOnly)
-            //{
-            //    return false;
-            //}
+            if (!Clearable)
+            {
+                return false;
+            }
 
             return HasValue(ReadValue);
         }

src/CodeBeam.MudBlazor.Extensions/Components/InputExtended/MudInputExtended.razor.cs

@@ -2,7 +2,7 @@
 @typeparam T
 @inherits MudBaseInputExtended<T>
 
-<CascadingValue Name="Standalone" Value="false" IsFixed="true">
+<CascadingValue Name="SubscribeToParentForm" Value="false" IsFixed="true">
     <CascadingValue Value="@this" IsFixed="true">
         <div class="mud-select-extended" style="@(Disabled ? "pointer-events: none" : null)" id="@_elementId">
             <MudInputControl
@@ -29,7 +29,7 @@
                                       HasAdornmentStart="@(AdornmentStart != null)" HasAdornmentEnd="true"
                                       Value="@(Strict && !IsValueInList ? null : ReadText)" Underline="@Underline"
                                       Disabled="@GetDisabledState()" ReadOnly="true" Error="@ErrorState.Value" ErrorId="@ErrorIdState.Value"
-                                      Clearable="@Clearable" OnClearButtonClick="(async (e) => await SelectClearButtonClickHandlerAsync(e))"
+                                      Clearable="@(Clearable && !GetReadOnlyState())" OnClearButtonClick="(async (e) => await SelectClearButtonClickHandlerAsync(e))"
                                       @attributes="UserAttributes" OnBlur="@OnLostFocus" ShrinkLabel="@(AdornmentStart != null || ShrinkLabel)" Typo="@Typo"
                                       ShowVisualiser="true" DataVisualiserStyle="min-height: 1.1876em; padding-right: 0px;">
 

src/CodeBeam.MudBlazor.Extensions/Components/SelectExtended/MudSelectExtended.razor

@@ -53,7 +53,7 @@
                                       KeyDownPreventDefault="KeyDownPreventDefault"
                                       KeyUpPreventDefault="KeyUpPreventDefault"
                                       HideSpinButtons="true"
-                                      Clearable="@Clearable"
+                                      Clearable="@ShowClearButton()"
                                       OnClearButtonClick="@OnClearButtonClick"
                                       Pattern="@Pattern"
                                       AutoSize="AutoSize"

src/CodeBeam.MudBlazor.Extensions/Components/TextFieldExtended/MudTextFieldExtended.razor

@@ -217,6 +217,12 @@ public IMask? Mask
         //    return base.SetTextAsync(text, updateValue);
         //}
 
+        private bool ShowClearButton()
+        {
+            if (SubscribeToParentForm)
+                return Clearable && !GetReadOnlyState() && !GetDisabledState();
+            return Clearable && !GetDisabledState();
+        }
         private async Task OnMaskedValueChanged(string s)
         {
             await SetTextAndUpdateValueAsync(s, false);