blazored / typeahead Goto Github PK

Once you've narrowed down the list to only one option, user should be able to hit Enter or Tab to select that option and move on to next control in the form. They should not have to use the mouse to finish the selection, or use the down-arrow to move down to the one and only selection.

To repro, run the example code app, first example (I'm using Server-side Blazor):

1. Type 'tracy' in search box
2. Notice only one selection is remaining, Tracy Gwinnell
3. Hit Enter key. Nothing happens (expected behavior: Tracy Gwinnell is selected)
4. Hit Tab key. Search box is cleared, nothing is selected. (Expected behavior: (Tracy Gwinnell is selected, focus moves to Submit button)

If, when the user hits Enter/Tab, there are still multiple items in the list, perhaps it should just pick the first one?

I just upgraded to version 3.0.1 and now I get this error.
I am using the standalone version. Did I miss something after the upgrade?

The type or namespace name 'BlazoredTypeaheadInputBase<>' could not be found (are you missing a using directive or an assembly reference?) D:\dev\test\obj\Debug\netcoreapp3.0\RazorDeclaration\Forms\BlazoredTypeaheadInput.razor.g.cs 56

Currently when the user clicks the dropdownarrow and wants to see the results, the NotFound is not showing if there are no results (meaning: the searchfunction returned no items).

Basically it's because of the IsValidSearch in the ShowNotFound method.

Currently:

        protected bool ShowNotFound()
        {
            return IsShowingSuggestions &&
                   HasValidSearch &&
                   !IsSearchingOrDebouncing &&
                   !Suggestions.Any();
        }

FIX:

        protected bool ShowNotFound()
        {
            return IsShowingSuggestions &&
                   !IsSearchingOrDebouncing &&
                   !Suggestions.Any();
        }

I get the following exception when running the server side example project:

Microsoft.JSInterop.JSException: Could not find 'blazoredTypeahead' in 'window'.

1. Search Item
2. Get suggestions
3. Use tab to select the first one.

After typing text into the input field, hitting Tab key clears all the chars you just entered, and moves focus to the next control in the form. Moving focus is expected, but clearing the text you've just typed seems odd to me, and will be confusing for users. Some users may expect Tab to complete the selection (as it does in, for example, Visual Studio/Code intellisense), but they would not expect it to undo the work they just did.

Also, if you enter partial text, then arrow-down to high-light an item in the list, then hit Tab, your selection is not chosen (highlighted item is lost), and your text is cleared. All your work is undone.

I suggest the control be changed to preserve the text already entered at minimum, and ideally provide a hook for the caller of the control to be able to take their own custom action upon Tab keypress (to select the first item, for example).

Would it be possible to replicate this feature where instead of it being a drop down, it can be a list box, where you set the size of it. And the search bar filters the list as it currently does?

Currently when searching, if no result is selected but there is already a selected item from a previous search Losing focus on the search input leaves an empty field, this should switch back to the SelectedTemplate.

For use in a business application having a disabled option is a must (or we could create a look-alike control to show instead but ick!) Please add disabled support!

If Disabled is true:

• Disable input element
• HandleClear and ShowMaximumSuggestions should not be wired or should return before doing any work
• Hover effects over blazored-typeahead__input__icon should be disabled
• placeholder text should not be shown

When an item is selected and you want to change it. Clicking on the input puts the control back into search mode but the focus is not on the input. A further click is required to set focus on the control.

I was playing with the sample and noticed the server side blazor sample stops working after the first search when using IIS Express.
I then found out websockets doesn't work on IISExpress 8 on windows 7. only on 8 or 2012+

https://docs.microsoft.com/en-us/aspnet/core/fundamentals/websockets?view=aspnetcore-2.2

Fortunately using Kestrel works fine.

Just in case anyone else was coming across the same issue.

Maybe a note in readme if using windows 7 use Kestrel?

https://github.com/Blazored/Typeahead/blob/master/src/Blazored.Typeahead/content/blazored.Typeahead.ts

I am not sure it is a good idea to use dot (period) or mixed case in static asset names.

May be better to use

blazored-typeahead.css
blazored-typeahead.ts

Technically URLs are case sensitive and dots are allowed but rarely used due to problems with users using regex for redirection in their reverse proxy servers.

If you look at other js libraries this seems to be the convention.

Since i am a newbee to blazor there might be an easy solution for my question.

Server Side Blazor

I have a main page with a child component that has a typeahead component, three levels, main -> component -> typeahead. How do I bubble up the event from typeahead to the main page?
I've managed to get it to the degree that the event bubbles up to the main page, but then the typeahead component disappears. So I'm probably doing something wrong. Can you put an event callback on the template for the result on change? Or is it a completely wrong implementation?

I am currently running using Typeahead 3.1.8

After certain actions, I am attempting to clear the Typeahead search bar so that the user can perform a new search. I do this by setting the bound value to string.Empty

It appears that the value has been cleared in the UI, however, as soon as I focus on the text box the previously cleared value re-appears.

In the Search method you are executing on the context of a timer, and might want to use

Invoke (StateHasChanged);

To protect against synchronisation context issues.

There is an endless loop occuring in the component.
To reproduce:

1. Set a breakpoint in the setter of the _searchText
2. Optionally set the default Debounce value to 5000000 (so we know it's not coming from here.
   => endless onfocus loop

To fix this issue:

• change onfocus to onclick in the input of the control.

A use case for this is as follows - when showing a modal with a typeahead component, it would be nice to set the focus to the input box so the user can just start typing. The same could apply when navigating to a page with a typeahead component.

If not drop down/typing event i have error then submit the editContext.
example

    <p>
        <label>ИТСО</label>
        <BlazoredTypeaheadInput SearchMethod="@(async (s)=>await SearchITSO(s))"
                                @bind-Value="@specificationDP.ITSO">
            <SelectedTemplate Context="itso">
                @itso.Name
            </SelectedTemplate>
            <ResultTemplate Context="itso">
                Наименование: @itso.Name<br>
                Код оборудования: @itso.DeviceCode<br>
            </ResultTemplate>
        </BlazoredTypeaheadInput>
    </p>

Microsoft.AspNetCore.Components.Server.Circuits.RemoteRenderer: Warning: Unhandled exception rendering component: Cannot read property 'addEventListener' of null
TypeError: Cannot read property 'addEventListener' of null
at Object.addFocusoutEventListener (http://localhost:55460/_content/Blazored.Typeahead/blazored-typeahead.js:7:17)
at http://localhost:55460/_framework/blazor.server.js:8:28738
at new Promise ()
at e.beginInvokeJSFromDotNet (http://localhost:55460/_framework/blazor.server.js:8:28707)
at http://localhost:55460/_framework/blazor.server.js:1:19148
at Array.forEach ()
at e.invokeClientMethod (http://localhost:55460/_framework/blazor.server.js:1:19119)
at e.processIncomingData (http://localhost:55460/_framework/blazor.server.js:1:17165)
at e.connection.onreceive (http://localhost:55460/_framework/blazor.server.js:1:10276)
at WebSocket.i.onmessage (http://localhost:55460/_framework/blazor.server.js:1:38027)

Clicking on the footer template, or any of the elements inside the footer template causes the component to close the suggestion list.

The footer template can be used in a variety of ways, including:

• Showing suggestion/item count.
• Showing a label with a description or help.
• Showing a link/logo to the service providing the suggestions (like weather service provider).

Clicking outside the list entirely should obviously close the suggestions list.

I want to set the currently selected Value from the outside. Looks like we need to add some kind of UI state refresh if Value changes.

I might make up a PR for this.

.blazored-typeahead__input:focus only focuses the input itself. This makes the :focus style cut of before the arrow if you have enabled dropdown and it looks kinda strange (in my opinion:))

Is there a way to use this like a DropDownList?
Example when I click on it all list items are shown and then I can filter them.

Add a event to the control which is raised when the value of the typeahead is changed. This is useful when using the control in more complex forms where you need to enable/disable other controls based on changes to selected values.

Single vs multi-mode
Should this work any differently? Probably not.

Nyaamaste.

It would be great if the library could support a header template as well as a footer template. The header could be used to add a "Add product" or similar button or a checkbox to toggle a filter. The footer could be used for paging and showing the number of returned rows.

Thank you !

Currently, if I set id, disabled, class, etc. it results in a Object reference not set to an instance of an object error at runtime.

<BlazoredTypeahead id="test" SearchMethod="Search" @bind-Value="@ReferenceProperty.Value" >

I think it would be great to have the dropdown menu closed when you click anywhere on the screen outside of it. If you do not have the dropdown button enabled and end up not wanting to select an item or not finding an item, there is no easy way to close it.

Hi Chris,

Thanks for the control - it's great! :)

I have an input where I'm tying in an event to the Enter key, so that somebody can type in a string, and when they hit enter it'll trigger an action to update the underlying object. So I have:

<input @bind-value="NewTag" @bind-value:event="oninput" @onkeyup="ProcessEnterKey" >

@code:

private void ProcessEnterKey( KeyboardEventArgs eventArgs)
    {
        if (eventArgs.Key == "Enter" )        // fire on enter 
            SaveTheData();
    }

Unfortunately, if I try and use this with the BlazoredTypeAhead like this:

<BlazoredTypeahead SearchMethod="SearchTags" @bind-Value="NewTag" @onkeyup="ProcessEnteEnterr">

it breaks the Typeahead control - I think because it replaces your control's internal onkeyup Handler. I'm relatively new to Blazor - is there a way to have both handlers in place, or is there a trivial way to extend the Typeahead keyup handler? I was going to derive a custom class using the BlazoredTypeAhead as the base, and then override the OnKeyUp method to extend it, but to do this, your KeyUp handler would need to be virtual. Is there a better, or more idiomatic way to do this in Blazor?

You probably know this already but you can now include static assets in a library which would eliminate a big caveat mentioned in the README

https://devblogs.microsoft.com/aspnet/asp-net-core-and-blazor-updates-in-net-core-3-0-preview-6/

#31 Made it possible to use Escape, Tab, Delete, Backspace, OnFocusOut etc.

This issue is to make it possible to use the arrow keys of the keyboard in the suggestion-result to navigate up/down.

Possible solution:

• Not sure yet, still have to investigate.

private async Task<List> SearchFilms(string searchText) gives an error on SearchMethod of the wrong return type.

private async Task<IEnumerable> SearchFilms(string searchText) allows it to work. The docs show list

Preview 9

Currently the suggestions are not hidden when the input loses focus. This won't be an easy fix if you only use C# though. Since the onfocusout event isn't fully supported in Blazor yet.

After upgrading to asp.net core Preview-8 and TypeAHead 3.13 I get the following error (same with 3.12).
Build:No inputs were found in config file C:/Users/username/.nuget/packages/blazored.typeahead/3.1.3/contentFiles/any/netstandard2.0/tsconfig.json'.
Specified 'include' paths were '["**/*"]' and 'exclude' paths were '["wwwroot"].

Is there any reason that SearchMethod needs to be List ? IEnumerable is the best choice to collection parameters.

Allow to search and show suggestions when getting focus, or when user click on the input. Setting the length to 0 seems not to be enough. Or maybe I missed something?

Currently the suggestion window appears as soon as the first character is entered. This isn’t great, it should only show when the minimum character count is reached.

Investigate the ability to add the text entered as a search, as a new value. I'm not sure that makes sense to anyone else, but I know what I mean! 😆

The example would be if the typeahead was used for selecting a city. If the city exists a user can select it as normal, if it doesn't it can be added.

Much like InputBase in AspNetCore (here) the status classes from the EditContext should be added to the input. This is needed so that we can style the input itself when it is valid, invalid and modified.

After we select an item we focus the textfield again, which is pretty annoying when using this component in bigger forms. After the select, it should not focus the searchfield again so we can tab to the next input element.

I used the example found here: https://chrissainty.com/getting-started-with-blazored-typeahead/

@page "/typeahead"

<h3>Typeahead</h3>

<BlazoredTypeahead SearchMethod="SearchFilms"
				   @bind-Value="SelectedFilm">
	<SelectedTemplate>
		@context.Title
	</SelectedTemplate>
	<ResultTemplate>
		@context.Title (@context.Year)
	</ResultTemplate>
</BlazoredTypeahead>

@if (SelectedFilm != null)
{
	<p>Selected Film is: @SelectedFilm.Title</p>
}

@code {

	private List<Film> Films;
	private Film SelectedFilm;

	protected override void OnInitialized()
	{
		Films = new List<Film> {
			new Film("The Matrix", 1999),
			new Film("Hackers", 1995),
			new Film("War Games", 1983) };
	}

	private async Task<List<Film>> SearchFilms(string searchText)
	{
		return await Task.FromResult(Films.Where(x => x.Title.ToLower().Contains(searchText.ToLower())).ToList());
	}

	class Film
	{
		public string Title { get; set; }
		public int Year { get; set; }

		public Film(string title, int year)
		{
			Title = title;
			Year = year;
		}
	}

}

During compile, I received the following errors:

The razor component doesn't show any errors until compile time.

If you have a big list of items the rendering can slow down the component. To tackle this performance hit, we could use the idea of virtualization where we only render de SelectItems which are being shown.

A package that does this is the following:
https://samprof.github.io/BlazorVirtualScrolling/
However we could also roll our own, so I'm looking for some feedback on this one.

It could be easier for people to see what the component does if we added a GIF to the readme. I personally like repo's like that since then I don't have to check out the demo, but get a brief idea of what the component is all about.

Using ScreenToGif this can be done quite easily

I am using asp.net core 3.0 preview-5 and I get this error when I try to use BlazoredTypeAhead on a serverside Blazor. Am I missing something or doesn't it work with preview 5?

Error CS0411 Active The type arguments for method 'TypeInference.CreateBlazoredTypeahead_0(RenderTreeBuilder, int, int, Func<string, Task<List>>, int, object, int, RenderFragment, int, RenderFragment)' cannot be inferred from the usage. Try specifying the type arguments explicitly.

@page "/Booking"
@using Blazored.Typeahead
@using Trebor.BeteckningSystem.Shared
@inject Trebor.BeteckningSystem.Interfaces.IAreaService areaService

<div>

    <BlazoredTypeahead Data="@SearchAreas" bind="@SearchAreas">
        <SelectedTemplate>
            @context.Name
        </SelectedTemplate>
        <ResultTemplate>
            @context.Name (@context.Descr)
        </ResultTemplate>
    </BlazoredTypeahead>

</div>


@functions {

    [Parameter] protected IEnumerable<Area> Areas { get; set; }

    private IEnumerable<Area> SearchAreas(string searchText)
    {
        return areaService.GetAreas(searchText);
    }
}

If the input has focus and a user push ArrowDown or Enter it should ShowMaximumSuggestions (much like the handler on the dropddown arrow icon).

This is very convenient when tabbing through a form and you wanna open the suggestions fast (and you dont wanna show all options on focus).

According to https://help.github.com/en/articles/licensing-a-repository your repro is fully copyrighted and I won't be able to use it. The boilerplate MIT license would work.

BTW, love your work. Keep it up!

Its been suggested that I merge my fork back into this project. However the code has drifted a lot. Do we still want me to merge my source in?

Issues/Differences

1. I made large changes to the html and css structure. We'd need to pick the best UI.
2. I removed the need for the separator form input control.
3. Added multi-select support
4. Added keyboard selection support
5. Added support for binding to a diff value then what the search result is

thoughts?

Demo: LoreSoft Blazor Controls
Repo: LoreSoft.Blazor.Controls

thanks,
~ Paul

The new version has a lot of new features and the docs need to be made better so people can discover and understand them better. Also a demo would be a good idea!

How can i do a multiple select values?

I recently upgraded from ASP.NET Core 3.0 Preview 7 to Preview 8 and noticing below error:

Could not load type 'Microsoft.AspNetCore.Components.ElementRef' from assembly 'Microsoft.AspNetCore.Components

I am suspecting it is due to a breaking change as mentioned in this link: https://devblogs.microsoft.com/aspnet/asp-net-core-and-blazor-updates-in-net-core-3-0-preview-8/

"Rename ElementRef to ElementReference."

Any pointers?

NameSpace not found after update.