Problems with keyboard navigation in the Blazor Wizard component

Progress® Telerik® UI for Blazor Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Completed

Last Updated: 09 Sep 2021 08:30 by ADMIN

Release 2.27.0

Chuck

Created on: 07 Jul 2021 14:40

Category: UI for Blazor

Type: Bug Report

Problems with keyboard navigation in the Blazor Wizard component

Steps to reproduce this are pretty simple. On the Blazor Wizard demo at this link:

https://demos.telerik.com/blazor-ui/wizard/overview?_ga=2.135424305.1441063975.1625423575-1371905116.1594731896&_gac=1.21975282.1624709398.85e5788e7d791cbf2099185965b0351c

- Enter a password on step 1

- Click 'Next' to bring you to the 'Shipping' step

- Set focus to the 'City' input box. I clicked to the end of the default string that is pre-populated as 'Torino'

- Press the left arrow key. This sends you back to Step 1 (Registration)

This is a pretty big stumbling block for using the Wizard component, but I may be missing some kind of setting or code that will resolve this.

Duplicated Items

DatePicker Control Used within the Wizard navigation issues.

2 comments

Chuck

Posted on: 09 Jul 2021 11:18

Hey Radko,

That did the trick for my wizards. I appreciate the response and workaround for this.

Thanks,

Chuck

ADMIN

Radko

Posted on: 09 Jul 2021 07:40

Hello Chuck,

Thank you for noticing and reporting. The status of this thread is now Unplanned as this is a valid bug report. As a token of appreciation, I have added some Telerik points to your account.

As a workaround, you can wrap the contents of the Content component with a div that stops the propagation of the on onkeydown event:

<TelerikWizard @bind-Value="@Value" OnFinish="@OnWizardFinish">
    <WizardSteps>
        <WizardStep Label="Registration" OnChange="@OnRegistrationStepChange">
            <Content>
                 <div @onkeydown:stopPropagation>
		            ...
                 </div>
            </Content>
        </WizardStep>
        <WizardStep Label="Shipping" OnChange="@OnShippingStepChange">
            <Content>
                <div @onkeydown:stopPropagation>
					...
                </div>
            </Content>
        </WizardStep>
		...
    </WizardSteps>
</TelerikWizard>

Regards, Radko Stanev Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.