Skip to content

DropDown: TextSelectionMode causes input to move to start when pressing ARROW DOWN #208

@Jemt

Description

@Jemt

See the following example: https://jsfiddle.net/tk5yp12x/
(Code also attached at the end).

  1. Enter an 'e' in the dropdown to search for matches containing the letter 'e'.
  2. 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;
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions