Add handler for OnKeyUp( enter ) on form/page

[Webreaper]

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?

[chrissainty]

Hi,

I think you can achieve what you want but you'll need to change your approach a bit. You can't use @bind-Value with the Typeahead, it's a complex control and the underlying input isn't directly exposed for you to hook into.

You could add an input into the footer or header template which would allow someone to enter a value and you could apply your onkeyup event there. I am currently working through a bug (#66) which may effect this in the short term, but I'm hoping to have it fixed today.

[Webreaper]

Thanks for the quick response! I guess a quick fix could be an enhancement to allow somebody to specify their own callback, which would get wired up into the HandleKeyUp method (here). If I get time I might look at trying that out and if it works submitting a PR.

[chrissainty]

If you could hold off doing anything just yet, I appreciate the enthusiasm but we're discussing that option on #55. And I don't want you to do something which then has to be changed or removed.

[Webreaper]

Haha - sure. I was likely to get to this in about 6-8 weeks, if I'm lucky, so no risk of doing anything which will interfere with the work you're doing on that issue. :)

[chrissainty]

I'm going to close this issue in favor of the existing one, if that's ok with you @Webreaper? If you feel anything is not being covered please re-open.

[Webreaper]

Fine with me - makes total sense. Thanks!

[rgamage]

@chrissainty you said you can't use @bind-value on typeahead, but the example code uses it. ??

<BlazoredTypeahead SearchMethod="SearchFilms" @bind-Value="MyFormModel.SelectedFilm">

[chrissainty]

@rgamage The comment you're referring to was from before a major update of the control when we didn't use @bind-Value.