1. Home
  2. Forum
  3. Blazor
  4. With Autofill="false" the text box gets autopopulated if you use page down or page up to navigate the popup list

With Autofill="false" the text box gets autopopulated if you use page down or page up to navigate the popup list

Hello,

I have found that with Autofill="false", after entering some filter text in the auto complete text box I can navigate up and down the popup list of items without the value in the text box changing until I press Enter or Tab to select an item as expected.

However, if I use Page Up or Page Down to navigate the list then the component automatically populates the text box with the item I have paged to which is NOT what I would expect.

How can I prevent Page Up and Page Down from populating the text box?

Thanks,


3 Replies
DR Deepak Ramakrishnan Syncfusion Team December 27, 2021 06:59 PM UTC

Hi Chuck, 
 
Greetings from Syncfusion support. 
 
The reported issue is the component’s intended behavior . We will further validate the issue and provide the details in two business days(29th,December 2021) 
 
Thanks, 
Deepak R. 
 
 


CR Chuck Richardson December 28, 2021 08:17 PM UTC

Hello,

Thank you for your reply.

However, according to the documentation using the Page Up and Page Down keys are supposed to work like the Arrow Up and Arrow Down keys. They are supposed to select the item but NOT set it into the set it into the AutoComplete component. Whereas if you look at the documentation for the Enter key, it is supposed to set the value into the AutoComplete component.

Furthermore, it doesn't make sense that Page up and Page down set the selection into the AutoComplete component when AutoComplete="false" because they leave the popup open and are just to navigate the list.

See here for documentation on the keyboard interaction Accessibility in Blazor AutoComplete Component | Syncfusion


Thanks,


Chuck




DR Deepak Ramakrishnan Syncfusion Team December 30, 2021 03:29 PM UTC

You can prevent the unnecessary  key actions by binding  keydown event in script level using interop method in oninitialize blazor lifecycle . You can refer the below code snippet and sample for reference. 
 
@inject IJSRuntime JSRuntime 
 
 
<SfAutoComplete ID="SyncAutocomplete" TValue="string" TItem="GameFields" Autofill="true" Placeholder="e.g. Basketball" DataSource="@Games"> 
    <AutoCompleteFieldSettings Value="Text" /> 
</SfAutoComplete> 
 
 
@code{ 
 
    
    protected override Task OnInitializedAsync() 
    { 
        JSRuntime.InvokeVoidAsync("preventAction"); 
        return base.OnInitializedAsync(); 
    } 
 
    public class GameFields 
    { 
        public string ID { get; set; } 
        public string Text { get; set; } 
    } 
    private List<GameFields> Games = new List<GameFields>() 
{ 
        new GameFields(){ ID= "Game1", Text= "American Football" }, 
        new GameFields(){ ID= "Game2", Text= "Badminton" }, 
        new GameFields(){ ID= "Game3", Text= "Basketball" }, 
        new GameFields(){ ID= "Game4", Text= "Cricket" }, 
        new GameFields(){ ID= "Game5", Text= "Football" }, 
        new GameFields(){ ID= "Game6", Text= "Golf" }, 
        new GameFields(){ ID= "Game7", Text= "Hockey" }, 
        new GameFields(){ ID= "Game8", Text= "Rugby"}, 
        new GameFields(){ ID= "Game9", Text= "Snooker" }, 
        new GameFields(){ ID= "Game10", Text= "Tennis"} 
     }; 
    public string DropDownValue = "Game3"; 
    public string ChangeValue { get; set; } = "Basketball"; 
 
} 
 
 
 
 
 
 
Kindly revert us if this does not meet your requirement 


Loader.
Up arrow icon