See the following example: https://jsfiddle.net/tk5yp12x/
(Code also attached at the end).
- Enter an 'e' in the dropdown to search for matches containing the letter 'e'.
- Press ARROW DOWN to move down the list. Notice how the text cursor is moved to the beginning of the input field.
This makes it difficult to adding additional letters to the search string.
The root of the problem is this:
|
Fit.Dom.SetCaretPosition(txtPrimary, 0); |
I believe the code above was added to make sure e.g. (3) Item 1, My Item 2, Another Item 3 was not scrolled out of view when selecting/deselecting or navigating down the list of items in the pull down menu using ARROW DOWN. But changing the position of the cursor is just bad practice, and as demonstrated it doesn't play well when search is implemented.
Notice that Fit.Dom.SetCaretPosition(...) is used in two places in DropDown.js. It's also used here:
https://github.com/Jemt/Fit.UI/blob/14087818019a6859a25fb5e542d6e2e0ad398304/Controls/DropDown/DropDown.js#L2979C4-L2979C28
Code from JSFiddle:
DropDown with ListView picker and search function<br><br>
<div id="Control"></div>
<div id="Value"><br><b>Users selected</b>:</div>
body
{
font-family: verdana;
font-size: 14px;
color: #333;
}
Fit.Events.OnReady(function()
{
// ListView picker
var lv = new Fit.Controls.ListView();
// DropDown
var dd = new Fit.Controls.DropDown("DropDown1");
dd.TextSelectionMode(true);
var addUsersToDropDown = function()
{
lv.RemoveItems();
Fit.Array.ForEach(GetUsers(), function(user)
{
var search = dd.GetInputValue().toLowerCase();
if (search === "" || user.Name.toLowerCase().indexOf(search) > -1)
lv.AddItem(user.Name, user.Mail);
});
}
dd.SetPicker(lv);
dd.MultiSelectionMode(true);
dd.Width(400);
dd.DropDownMaxHeight(150);
dd.InputEnabled(true);
dd.OnOpen(function(sender) // Add data to ListView picker within DropDown
{
addUsersToDropDown();
});
dd.OnInputChanged(function(sender)
{
addUsersToDropDown();
});
dd.OnChange(function(sender)
{
var val = document.querySelector("#Value");
val.innerHTML = "<br><b>Users selected</b>:";
Fit.Array.ForEach(dd.GetSelections(), function(sel)
{
val.innerHTML += "<br>" + sel.Title + " (" + sel.Value + ")";
});
});
dd.Render(document.querySelector("#Control"));
if (Fit.Browser.IsMobile())
dd.Width(100, "%");
});
// ============================
// Get demo data
// ============================
window.GetUsers = function(picker)
{
var users =
[
{ Name: "James Thomson", Mail: "james@server.com" },
{ Name: "Hans Törp", Mail: "hans@server.com" },
{ Name: "Ole Shortsom", Mail: "ole@server.com" },
{ Name: "Michael Burström", Mail: "michael@server.com" },
{ Name: "Ilda Longstum", Mail: "ilda@server.com" },
{ Name: "Martin Grom", Mail: "martin@server.com" },
{ Name: "Anders Handsom", Mail: "anders@server.com" },
{ Name: "Jacob Marking", Mail: "jacob@server.com" },
{ Name: "Jan Jacksson", Mail: "jan@server.com" },
{ Name: "Christian Fros", Mail: "christian@server.com" }
];
return users;
}
See the following example: https://jsfiddle.net/tk5yp12x/
(Code also attached at the end).
This makes it difficult to adding additional letters to the search string.
The root of the problem is this:
Fit.UI/Controls/DropDown/DropDown.js
Line 2138 in 1408781
I believe the code above was added to make sure e.g.
(3) Item 1, My Item 2, Another Item 3was not scrolled out of view when selecting/deselecting or navigating down the list of items in the pull down menu using ARROW DOWN. But changing the position of the cursor is just bad practice, and as demonstrated it doesn't play well when search is implemented.Notice that
Fit.Dom.SetCaretPosition(...)is used in two places in DropDown.js. It's also used here:https://github.com/Jemt/Fit.UI/blob/14087818019a6859a25fb5e542d6e2e0ad398304/Controls/DropDown/DropDown.js#L2979C4-L2979C28
Code from JSFiddle: