Unplanned
Last Updated: 31 Jan 2020 10:25 by ADMIN
Brian
Created on: 30 Jan 2020 06:20
Category: AutoComplete
Type: Feature Request
2
AutoComplete default line selection

When typing in the AutoComplete component, it defaults to the last visible line in the drop down list, if the item is greater than the window size.  On mobile devices, this has a negative effect that the on-screen keyboard will mask the typed in entry if the list is too long.  If the height of the dropdown list is accurate, it is not masked, but it is still at the bottom of the list.  If you type a query into Google, the highlight item as at the top of the list, not the bottom.

1) I propose to change the default functionality of AutoComplete to display the closest match at the top of the dropdown box, not at the bottom.

2) I propose to add a new new control DefaultDisplayPosition=[First|Middle|Last] to give developers control over the UI experience.

To be clearer, you have a list that of X items.  The AutoComplete window can display Y items.  X can be >, < or = to Y.  If X[selected] is < Y, it will be highlighted anywhere between Y[First] through Y[Last].  However, if it is >= Y[Last], then the highlighted selection is always the last item in the dropdown display.  There should be an option to set the highlighted item to Y[First], Y[Middle], or Y[Last], maybe even Y[N] (not so sure about that).  Again with all kinds of different mobile screen sizes, with the current default being Y[last], it can easily be hidden by the on screen keyboard.   

 

1 comment
ADMIN
Marin Bratanov
Posted on: 31 Jan 2020 10:25

Hi Brian,

Thank you for posting this.

We have discussed it here and perhaps we will change the default behavior of the dropdowns so that the focused item comes up at the top of the list (if possible, of course, that depends on the overall data). If a default behavior change does not happen, it is likely that a parameter will become available that will be something like FocusedItemPosition="Top|Bottom".

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor