From 890df0294eb18dc9bf1891dee1ca2abd7004455c Mon Sep 17 00:00:00 2001 From: Simon Schulze Date: Tue, 11 Oct 2022 11:50:57 +0200 Subject: [PATCH 1/7] Capture css attributes 'class' and 'style' from Additionalattributes and set them on top level 'div' --- .../BlazoredTypeahead.razor | 2 +- .../BlazoredTypeahead.razor.cs | 24 ++++++++++++++++++- 2 files changed, 24 insertions(+), 2 deletions(-) diff --git a/src/Blazored.Typeahead/BlazoredTypeahead.razor b/src/Blazored.Typeahead/BlazoredTypeahead.razor index c6d7350..e0581d7 100644 --- a/src/Blazored.Typeahead/BlazoredTypeahead.razor +++ b/src/Blazored.Typeahead/BlazoredTypeahead.razor @@ -3,7 +3,7 @@ @typeparam TItem @typeparam TValue -
+
diff --git a/src/Blazored.Typeahead/BlazoredTypeahead.razor.cs b/src/Blazored.Typeahead/BlazoredTypeahead.razor.cs index 511f6a7..d2bb311 100644 --- a/src/Blazored.Typeahead/BlazoredTypeahead.razor.cs +++ b/src/Blazored.Typeahead/BlazoredTypeahead.razor.cs @@ -16,6 +16,9 @@ public partial class BlazoredTypeahead : ComponentBase, IDisposab private bool _eventsHookedUp = false; private ElementReference _searchInput; private ElementReference _mask; + private IReadOnlyDictionary _capturedAttributes = default!; + private string _classAttribute = string.Empty; + private string _styleAttribute = string.Empty; [Inject] private IJSRuntime JSRuntime { get; set; } @@ -108,6 +111,8 @@ protected override void OnInitialized() throw new InvalidOperationException($"{GetType()} requires a {nameof(ResultTemplate)} parameter."); } + _capturedAttributes = CaptureCSSAttributes(AdditionalAttributes); + _debounceTimer = new System.Timers.Timer(); _debounceTimer.Interval = Debounce; _debounceTimer.AutoReset = false; @@ -130,7 +135,8 @@ protected override async Task OnAfterRenderAsync(bool firstRender) protected override void OnParametersSet() { - Initialize(); + //Initialize(); + IsShowingMask = Value != null; } private void Initialize() @@ -140,6 +146,22 @@ private void Initialize() IsShowingMask = Value != null; } + private IReadOnlyDictionary CaptureCSSAttributes(IReadOnlyDictionary additionalAttributes) + { + var capturedAttributes = additionalAttributes.ToDictionary(k => k.Key, v => v.Value); + if (capturedAttributes.ContainsKey("class")) + { + _classAttribute = (string)capturedAttributes["class"]; + capturedAttributes.Remove("class"); + } + if (capturedAttributes.ContainsKey("style")) + { + _styleAttribute = (string)capturedAttributes["style"]; + capturedAttributes.Remove("style"); + } + return capturedAttributes; + } + private async Task RemoveValue(TValue item) { var valueList = Values ?? new List(); From 881020b38d925ddf101274268d9db349f5fa39ec Mon Sep 17 00:00:00 2001 From: Simon Schulze Date: Tue, 11 Oct 2022 12:33:55 +0200 Subject: [PATCH 2/7] Apply only _capturedAttributes to input control --- src/Blazored.Typeahead/BlazoredTypeahead.razor | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Blazored.Typeahead/BlazoredTypeahead.razor b/src/Blazored.Typeahead/BlazoredTypeahead.razor index e0581d7..b39c3c7 100644 --- a/src/Blazored.Typeahead/BlazoredTypeahead.razor +++ b/src/Blazored.Typeahead/BlazoredTypeahead.razor @@ -82,7 +82,7 @@ @onkeyup:preventDefault="@PreventDefault" @onfocus="HandleInputFocus" autocomplete="off" - @attributes="AdditionalAttributes" + @attributes="_capturedAttributes" type="text" class="blazored-typeahead__input blazored-typeahead__input-multi" />
@@ -112,7 +112,7 @@ @onkeyup:preventDefault="@PreventDefault" @onfocus="HandleInputFocus" autocomplete="off" - @attributes="AdditionalAttributes" + @attributes="_capturedAttributes" type="text" class="blazored-typeahead__input @(IsShowingMask ? "blazored-typeahead__input-hidden" : null)" /> } From a6d2e07a579a052a291572228ed7115966e82fa5 Mon Sep 17 00:00:00 2001 From: Simon Schulze Date: Tue, 11 Oct 2022 12:38:24 +0200 Subject: [PATCH 3/7] Naming convention --- src/Blazored.Typeahead/BlazoredTypeahead.razor.cs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Blazored.Typeahead/BlazoredTypeahead.razor.cs b/src/Blazored.Typeahead/BlazoredTypeahead.razor.cs index d2bb311..7be12ed 100644 --- a/src/Blazored.Typeahead/BlazoredTypeahead.razor.cs +++ b/src/Blazored.Typeahead/BlazoredTypeahead.razor.cs @@ -111,7 +111,7 @@ protected override void OnInitialized() throw new InvalidOperationException($"{GetType()} requires a {nameof(ResultTemplate)} parameter."); } - _capturedAttributes = CaptureCSSAttributes(AdditionalAttributes); + _capturedAttributes = CaptureCssAttributes(AdditionalAttributes); _debounceTimer = new System.Timers.Timer(); _debounceTimer.Interval = Debounce; @@ -146,7 +146,7 @@ private void Initialize() IsShowingMask = Value != null; } - private IReadOnlyDictionary CaptureCSSAttributes(IReadOnlyDictionary additionalAttributes) + private IReadOnlyDictionary CaptureCssAttributes(IReadOnlyDictionary additionalAttributes) { var capturedAttributes = additionalAttributes.ToDictionary(k => k.Key, v => v.Value); if (capturedAttributes.ContainsKey("class")) From fb0ba19b9e9e1b742b59110a223951c14e52c4f8 Mon Sep 17 00:00:00 2001 From: Simon Schulze Date: Tue, 11 Oct 2022 12:54:28 +0200 Subject: [PATCH 4/7] Set blazored-typeahead__input to inherit color and background color per default --- src/Blazored.Typeahead/wwwroot/blazored-typeahead.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/Blazored.Typeahead/wwwroot/blazored-typeahead.css b/src/Blazored.Typeahead/wwwroot/blazored-typeahead.css index bced5c4..cac7662 100644 --- a/src/Blazored.Typeahead/wwwroot/blazored-typeahead.css +++ b/src/Blazored.Typeahead/wwwroot/blazored-typeahead.css @@ -27,6 +27,8 @@ border: none; padding: .5rem; border-radius: 5px; + color: inherit; + background-color: inherit; } .blazored-typeahead:focus-within { From f11ead1086166eec4a44b0d9650f29cd5eccc0f3 Mon Sep 17 00:00:00 2001 From: Simon Schulze Date: Tue, 11 Oct 2022 14:15:43 +0200 Subject: [PATCH 5/7] Updated for resiliency agains non string type values Adapted class on outer div to conform with default Input control style behaviour see https://github.com/dotnet/aspnetcore/blob/main/src/Components/Web/src/Forms/AttributeUtilities.cs --- src/Blazored.Typeahead/BlazoredTypeahead.razor | 2 +- src/Blazored.Typeahead/BlazoredTypeahead.razor.cs | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Blazored.Typeahead/BlazoredTypeahead.razor b/src/Blazored.Typeahead/BlazoredTypeahead.razor index b39c3c7..29edf68 100644 --- a/src/Blazored.Typeahead/BlazoredTypeahead.razor +++ b/src/Blazored.Typeahead/BlazoredTypeahead.razor @@ -3,7 +3,7 @@ @typeparam TItem @typeparam TValue -
+
diff --git a/src/Blazored.Typeahead/BlazoredTypeahead.razor.cs b/src/Blazored.Typeahead/BlazoredTypeahead.razor.cs index 7be12ed..75b25dd 100644 --- a/src/Blazored.Typeahead/BlazoredTypeahead.razor.cs +++ b/src/Blazored.Typeahead/BlazoredTypeahead.razor.cs @@ -151,12 +151,12 @@ private IReadOnlyDictionary CaptureCssAttributes(IReadOnlyDictio var capturedAttributes = additionalAttributes.ToDictionary(k => k.Key, v => v.Value); if (capturedAttributes.ContainsKey("class")) { - _classAttribute = (string)capturedAttributes["class"]; + _classAttribute = Convert.ToString(capturedAttributes["class"]) ?? string.Empty; capturedAttributes.Remove("class"); } if (capturedAttributes.ContainsKey("style")) { - _styleAttribute = (string)capturedAttributes["style"]; + _styleAttribute = Convert.ToString(capturedAttributes["style"]) ?? string.Empty; capturedAttributes.Remove("style"); } return capturedAttributes; From d5575d793e9a24261e9dbe62008a9a194f7d9c1d Mon Sep 17 00:00:00 2001 From: Simon Schulze Date: Tue, 11 Oct 2022 14:19:07 +0200 Subject: [PATCH 6/7] Restore OnParametersSet() --- src/Blazored.Typeahead/BlazoredTypeahead.razor.cs | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/Blazored.Typeahead/BlazoredTypeahead.razor.cs b/src/Blazored.Typeahead/BlazoredTypeahead.razor.cs index 75b25dd..fdb0567 100644 --- a/src/Blazored.Typeahead/BlazoredTypeahead.razor.cs +++ b/src/Blazored.Typeahead/BlazoredTypeahead.razor.cs @@ -135,8 +135,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender) protected override void OnParametersSet() { - //Initialize(); - IsShowingMask = Value != null; + Initialize(); } private void Initialize() From 52f0a2cba34219726dde95c754185e4ff904d78e Mon Sep 17 00:00:00 2001 From: Simon Schulze Date: Thu, 27 Oct 2022 15:32:36 +0200 Subject: [PATCH 7/7] Allow null values for additional attributes --- src/Blazored.Typeahead/BlazoredTypeahead.razor.cs | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/Blazored.Typeahead/BlazoredTypeahead.razor.cs b/src/Blazored.Typeahead/BlazoredTypeahead.razor.cs index fdb0567..81c07da 100644 --- a/src/Blazored.Typeahead/BlazoredTypeahead.razor.cs +++ b/src/Blazored.Typeahead/BlazoredTypeahead.razor.cs @@ -16,7 +16,7 @@ public partial class BlazoredTypeahead : ComponentBase, IDisposab private bool _eventsHookedUp = false; private ElementReference _searchInput; private ElementReference _mask; - private IReadOnlyDictionary _capturedAttributes = default!; + private IReadOnlyDictionary? _capturedAttributes; private string _classAttribute = string.Empty; private string _styleAttribute = string.Empty; @@ -43,7 +43,7 @@ public partial class BlazoredTypeahead : ComponentBase, IDisposab [Parameter] public RenderFragment HeaderTemplate { get; set; } [Parameter] public RenderFragment FooterTemplate { get; set; } - [Parameter(CaptureUnmatchedValues = true)] public IReadOnlyDictionary AdditionalAttributes { get; set; } + [Parameter(CaptureUnmatchedValues = true)] public IReadOnlyDictionary? AdditionalAttributes { get; set; } [Parameter] public int MinimumLength { get; set; } = 1; [Parameter] public int Debounce { get; set; } = 300; [Parameter] public int MaximumSuggestions { get; set; } = 10; @@ -145,8 +145,13 @@ private void Initialize() IsShowingMask = Value != null; } - private IReadOnlyDictionary CaptureCssAttributes(IReadOnlyDictionary additionalAttributes) + private IReadOnlyDictionary? CaptureCssAttributes(IReadOnlyDictionary? additionalAttributes) { + if (additionalAttributes == null) + { + return null; + } + var capturedAttributes = additionalAttributes.ToDictionary(k => k.Key, v => v.Value); if (capturedAttributes.ContainsKey("class")) {