Skip to content

[AutoComplete] Enable "Multiple = false" when selecting a single item is desired #3571

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vnbaaij merged 27 commits into from
Apr 22, 2025
Merged

[AutoComplete] Enable "Multiple = false" when selecting a single item is desired #3571

Changes from 1 commit
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
3288027
Autocomplete working with single item selected.
StevenRasmussen Mar 24, 2025
2ad0c86
Added a unit test and updated the results of the failing unit tests d…
StevenRasmussen Mar 24, 2025
f3c4199
Fixed whitespace issues.
StevenRasmussen Mar 24, 2025
5b0f2f2
Updates to demo page.
StevenRasmussen Mar 25, 2025
f9fdad0
Revert changes to class names so that it won't break anyone that is d…
StevenRasmussen Mar 25, 2025
5b2dfa4
Revert change to css.
StevenRasmussen Mar 25, 2025
f398a40
Accessibility changes.
StevenRasmussen Mar 25, 2025
1d01ba0
Updated to use a new attribute instead of a new class.
StevenRasmussen Mar 25, 2025
b3df6a2
Fix unit tests.
StevenRasmussen Mar 25, 2025
aee8b20
Fix whitespace change.
StevenRasmussen Mar 25, 2025
2e2c523
Reverted test files to remove noise from PR.
StevenRasmussen Mar 25, 2025
3645b30
Fixed an issue with really long text
StevenRasmussen Mar 27, 2025
2144040
Merge branch 'dev' into auto-complete-single-item-enhancements
StevenRasmussen Apr 3, 2025
cf780ac
Improve performance of line of code.
StevenRasmussen Apr 3, 2025
fa6034c
Removed the usage of addiing to the 'AdditionalAttributes' in favor o…
StevenRasmussen Apr 3, 2025
0b8509d
Added the tab stop for accessibility.
StevenRasmussen Apr 3, 2025
4b0d6c0
Fixed broken unit test after adding in the tabindex property.
StevenRasmussen Apr 3, 2025
629aafd
Update the subgrid to handle N:N relationships.
StevenRasmussen Apr 7, 2025
6fe88c1
Merge branch 'dev' into auto-complete-single-item-enhancements
StevenRasmussen Apr 7, 2025
9a92440
Merge branch 'dev' into auto-complete-single-item-enhancements
dvoituron Apr 13, 2025
d4d6b24
Merge branch 'auto-complete-single-item-enhancements' of https://gith…
StevenRasmussen Apr 19, 2025
0016c0f
Merge branch 'dev' into auto-complete-single-item-enhancements
StevenRasmussen Apr 19, 2025
8026280
Merge dev into auto-complete-single-item-enhancements
StevenRasmussen Apr 19, 2025
499affa
Multiple = false working.
StevenRasmussen Apr 19, 2025
6b5d808
Fixed unit tests. Removed unnecessary unit test.
StevenRasmussen Apr 19, 2025
3e3c8c0
Fixed code standards. Guarded against a null property.
StevenRasmussen Apr 20, 2025
ee83fc9
Merge branch 'dev' into auto-complete-single-item-enhancements
vnbaaij Apr 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Fixed code standards. Guarded against a null property.
  • Loading branch information
@StevenRasmussen
StevenRasmussen committed Apr 20, 2025
commit 3e3c8c0cae856e9401e181728a703ae2a204094b
121 changes: 62 additions & 59 deletions src/Core/Components/List/FluentAutocomplete.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,36 +68,35 @@
@RenderSelectedOptions
</div>
}

}
@if (!Disabled && !ReadOnly)
{
if (this.SelectedOptions?.Any() == true || !string.IsNullOrEmpty(ValueText) || this.SelectedOption is not null)
{
if (IconDismiss != null)
{
<FluentIcon Value="@IconDismiss"
Width="12px"
Style="cursor: pointer;"
Slot="end"
Title="@(Multiple == false ? string.Format(AccessibilityRemoveItem, GetOptionText(SelectedOption)) : AccessibilityIconDismiss)"
Focusable="true"
@onfocus="@(e => { IsReachedMaxItems = false; IsMultiSelectOpened = false; })"
OnClick="@OnClearAsync" />
<FluentIcon Value="@IconDismiss"
Width="12px"
Style="cursor: pointer;"
Slot="end"
Title="@(Multiple == false ? string.Format(AccessibilityRemoveItem, GetOptionText(SelectedOption)) : AccessibilityIconDismiss)"
Focusable="true"
@onfocus="@(e => { IsReachedMaxItems = false; IsMultiSelectOpened = false; })"
OnClick="@OnClearAsync" />
}
}
else
{
if (IconSearch != null)
{
<FluentIcon Value="@IconSearch"
Width="16px"
Style="cursor: pointer;"
Slot="end"
Title="@AccessibilityIconSearch"
Focusable="true"
@onfocus="@(e => { IsReachedMaxItems = false; IsMultiSelectOpened = false; })"
OnClick="@OnDropDownExpandedAsync" />
<FluentIcon Value="@IconSearch"
Width="16px"
Style="cursor: pointer;"
Slot="end"
Title="@AccessibilityIconSearch"
Focusable="true"
@onfocus="@(e => { IsReachedMaxItems = false; IsMultiSelectOpened = false; })"
OnClick="@OnDropDownExpandedAsync" />
}
}
}
Expand All @@ -108,48 +107,48 @@
{
@if (SelectValueOnTab)
{
<FluentKeyCode Anchor="@Id"
OnKeyDown="@KeyDownHandlerAsync"
Only="@SelectValueOnTabOnly"
PreventDefaultOnly="@SelectValueOnTabOnly" />
<FluentKeyCode Anchor="@Id"
OnKeyDown="@KeyDownHandlerAsync"
Only="@SelectValueOnTabOnly"
PreventDefaultOnly="@SelectValueOnTabOnly" />
}

<FluentOverlay OnClose="@(e => IsMultiSelectOpened = false)" Visible="true" Transparent="true" FullScreen="true" />
<FluentAnchoredRegion Anchor="@Id"
HorizontalDefaultPosition="HorizontalPosition.Right"
HorizontalInset="true"
VerticalDefaultPosition="@VerticalPosition.Unset"
Style="margin-top: 10px; border-radius: calc(var(--control-corner-radius) * 2px); background-color: var(--neutral-layer-floating);"
Shadow="ElevationShadow.Flyout">
HorizontalDefaultPosition="HorizontalPosition.Right"
HorizontalInset="true"
VerticalDefaultPosition="@VerticalPosition.Unset"
Style="margin-top: 10px; border-radius: calc(var(--control-corner-radius) * 2px); background-color: var(--neutral-layer-floating);"
Shadow="ElevationShadow.Flyout">
@if (HeaderContent != null)
{
@HeaderContent(Items ?? Array.Empty<TOption>())
@HeaderContent(Items ?? Array.Empty<TOption>())
}

<div id="@IdPopup" role="listbox" style="@ListStyleValue" tabindex="0">
@if (Items != null)
{
var selectableItem = GetOptionValue(SelectableItem);
var selectableItem = GetOptionValue(SelectableItem);

@if (Virtualize)
{
<Virtualize ItemsProvider="LoadFilteredItemsAsync" @ref="VirtualizationContainer" ItemSize="ItemSize">
@RenderOption((context, selectableItem))
</Virtualize>
}
else
{
foreach (TOption item in Items)
@if (Virtualize)
{
<Virtualize ItemsProvider="LoadFilteredItemsAsync" @ref="VirtualizationContainer" ItemSize="ItemSize">
@RenderOption((context, selectableItem))
</Virtualize>
}
else
{
@RenderOption((item, selectableItem))
foreach (TOption item in Items)
{
@RenderOption((item, selectableItem))
}
}
}
}
</div>

@if (FooterContent != null)
{
@FooterContent(Items ?? Array.Empty<TOption>())
@FooterContent(Items ?? Array.Empty<TOption>())
}
</FluentAnchoredRegion>
}
Expand All @@ -159,11 +158,11 @@
{
<FluentOverlay OnClose="@(e => IsReachedMaxItems = false)" Visible="true" Transparent="true" FullScreen="true" />
<FluentAnchoredRegion Anchor="@Id"
HorizontalDefaultPosition="HorizontalPosition.Right"
HorizontalInset="true"
VerticalDefaultPosition="@VerticalPosition.Unset"
Style="margin-top: 10px; border-radius: calc(var(--control-corner-radius) * 2px); background-color: var(--neutral-layer-floating); padding: 10px;"
Shadow="ElevationShadow.Flyout">
HorizontalDefaultPosition="HorizontalPosition.Right"
HorizontalInset="true"
VerticalDefaultPosition="@VerticalPosition.Unset"
Style="margin-top: 10px; border-radius: calc(var(--control-corner-radius) * 2px); background-color: var(--neutral-layer-floating); padding: 10px;"
Shadow="ElevationShadow.Flyout">
@MaximumSelectedOptionsMessage
</FluentAnchoredRegion>
}
Expand All @@ -175,15 +174,15 @@
{
var optionValue = GetOptionValue(context.Item);
<FluentOption TOption="TOption"
@key="@context.Item"
Value="@optionValue"
Style="@OptionStyle"
Class="@OptionClass"
Selected="@GetOptionSelected(context.Item)"
Disabled="@(GetOptionDisabled(context.Item) ?? false)"
OnSelect="@OnSelectCallback(context.Item)"
aria-selected="@(GetOptionSelected(context.Item) || optionValue == context.SelectableItem ? "true" : "false")"
selectable="@(optionValue == context.SelectableItem)">
@key="@context.Item"
Value="@optionValue"
Style="@OptionStyle"
Class="@OptionClass"
Selected="@GetOptionSelected(context.Item)"
Disabled="@(GetOptionDisabled(context.Item) ?? false)"
OnSelect="@OnSelectCallback(context.Item)"
aria-selected="@(GetOptionSelected(context.Item) || optionValue == context.SelectableItem ? "true" : "false")"
selectable="@(optionValue == context.SelectableItem)">
@if (OptionTemplate == null)
{
@GetOptionText(context.Item)
Expand All @@ -198,10 +197,14 @@
private RenderFragment RenderSelectedOptions => __builder =>
{
var selectedOptions = new List<TOption>();
if(Multiple && SelectedOptions.Any())
if (Multiple && (SelectedOptions?.Any() ?? false))
{
selectedOptions.AddRange(SelectedOptions);
}
if (!Multiple && SelectedOption is not null)
{
selectedOptions.Add(SelectedOption);
}

if (selectedOptions.Any())
{
Expand All @@ -218,16 +221,16 @@
else if (ReadOnly || Disabled)
{
<FluentBadge Appearance="@AspNetCore.Components.Appearance.Neutral"
aria-label="@GetOptionText(item)">
aria-label="@GetOptionText(item)">
@text
</FluentBadge>
}
else
{
<FluentBadge Appearance="@AspNetCore.Components.Appearance.Neutral"
OnDismissClick="@(e => RemoveSelectedItemAsync(item))"
DismissTitle="@(string.Format(AccessibilityRemoveItem, text))"
aria-label="@GetOptionText(item)">
OnDismissClick="@(e => RemoveSelectedItemAsync(item))"
DismissTitle="@(string.Format(AccessibilityRemoveItem, text))"
aria-label="@GetOptionText(item)">
@text
</FluentBadge>
}
Expand Down
Loading