Space bar does not work in input

[Henk van der Meer]

I have copied https://blazor.syncfusion.com/documentation/kanban/getting-started and addapted a bit to show my problem. Index.razor:
See code down below.
My issue is that I can edit text in the input box, but can not add spaces.

How can I fix this?

@page "/"

@using Syncfusion.Blazor

@using Syncfusion.Blazor.Kanban

<SfKanban TValue="TasksModel" KeyField="Status" DataSource="Tasks" AllowDragAndDrop="false">

    <KanbanColumns>

        <KanbanColumn HeaderText="Note" KeyField="@(new List<string>() {"Note"})"></KanbanColumn>

    </KanbanColumns>

    <KanbanCardSettings HeaderField="ObjectId" ContentField="ShortNote">

        <Template>

            @{

                TasksModel task = (TasksModel)context;

                <input type="text" @bind="task.Summary" />

            }

        </Template>

    </KanbanCardSettings>

</SfKanban>

@code {

    public class TasksModel

    {

        public string Status { get; set; }

        public string Summary { get; set; }

    }

    public List<TasksModel> Tasks = new List<TasksModel>()

    {

        new TasksModel { Status = "Note", Summary = "" },

    };

}

[Vinitha Jeyakumar]

Hi Henk,

You can use shift + Space key to enter a space in the input field instead of space key and it works as we expected.

Regards,

Vinitha

[Henk van der Meer]

Thank you for your quick response. But requiring the users to know that is a big ask. Can we make is so that they can use the space bar like they are used to?

[Buvana Sathasivam]

Hi Henk, 

To resolve your issue, bind the keydown event to the input element and provide stopPropagation() at the OnAfterRenderAsync Blazor lifecycle. Please see below the code and sample. 

Index.razor 

<SfKanban> 

    <KanbanCardSettings HeaderField="ObjectId" ContentField="ShortNote"> 

        <Template> 

            @{ 

                TasksModel task = (TasksModel)context; 

                <input id="input1"  @bind="task.Summary" type="text" /> 

            } 

        </Template> 

    </KanbanCardSettings> 

</SfKanban> 

@code { 

    [Inject] 

    IJSRuntime JsRuntime { get; set; } 

    protected override async Task OnAfterRenderAsync(bool firstRender) 

    { 

    if (firstRender) 

    { 

       await JsRuntime.InvokeVoidAsync("Kanban.createKanbanEvent"); 

    } 

    } 

} 

Jsinterop.js 

window.Kanban = { 

    createKanbanEvent: function () { 

        var element = document.getElementById("input1"); 

        element.addEventListener('keydown', this.kanbanKeyDown); 

    }, 

    kanbanKeyDown: function (e) { 

        e.stopPropagation(); 

    } 

} 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/kanban_space_key-1398506781 

Please let us know if you have any other concerns. 

Regards, 

Buvana S