Unplanned
Last Updated: 09 Jul 2021 11:18 by Chuck
Chuck
Created on: 07 Jul 2021 14:40
Category: UI for Blazor
Type: Bug Report
2
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.

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.