Clicking on areas outside form select component on page regitered click in the component

UNCONFIRMED
Unassigned

Status

()

--
minor
UNCONFIRMED
15 years ago
9 years ago

People

(Reporter: paul.wemyss, Unassigned)

Tracking

({testcase})

Trunk
x86
All
testcase
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(2 attachments)

(Reporter)

Description

15 years ago
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.7) Gecko/20040707 Firefox/0.8
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.7) Gecko/20040707 Firefox/0.8

I have created a page which dymanically populates a select list from an array,
and allows users to select items from this list by clicking on the and adds then
to a second list.  The problem occurs once you have selected a few items and
want to click elsewhere on the form, like the second select list to de-choose
the items, or to scroll the first list, the clicks are registered in the wrong
control.
I have tried code work-arounds, like setting the focus() away, or calling
blur(), but the only thing that works is actually to click well clear, and try
again.

Reproducible: Always
Steps to Reproduce:
1. Load the suplied page into the browser (code pasted in to additional information)
2. click on 2 items in the first list
3. Try to click on an itme in the second list (or to scroll the first list)

Actual Results:  
Additional items form the second list are seleced

Expected Results:  
Items from the second list are selected [and the removed by the script] (or I
can scroll the first list happily...)

<!DOCTYPE html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<TITLE>nasty bug</TITLE>
<STYLE>.flTop {
					font-family: Tahoma, Arial, Sans-Serif;
					font-size: 10px;
					color: #8099cc;
					font-weight: bold;
					text-transform: none;
				}
				.flSelectList {
					font-size: 10px;
					color: #666666;
					width:434px;
					overflow:visible;
				}
</STYLE>
<SCRIPT language="JavaScript">
				function getFullValsArray(){
					
					fullVals[0] = new Array("NAME name1", "NAME name1 --- Office, position
information etc.");
					fullVals[1] = new Array("NAME name2", "NAME name2 --- Office, position
information etc.");
					fullVals[2] = new Array("NAME name3", "NAME name3 --- Office, position
information etc.");
					fullVals[3] = new Array("NAME name4", "NAME name4 --- Office, position
information etc.");
					fullVals[4] = new Array("NAME name5", "NAME name5 --- Office, position
information etc.");
					fullVals[5] = new Array("NAME name6", "NAME name6--- Office, position
information etc.");
					fullVals[6] = new Array("NAME name7", "NAME name7 --- Office, position
information etc.");
					fullVals[7] = new Array("NAME name8", "NAME name8 --- Office, position
information etc.");
					fullVals[8] = new Array("NAME name9", "NAME name9 --- Office, position
information etc.");
					fullVals[9] = new Array("NAME name10", "NAME name10 --- Office, position
information etc.");
					fullVals[10] = new Array("NAME name11", "NAME name11 --- Office, position
information etc.");
					fullVals[11] = new Array("NAME name12", "NAME name12--- Office, position
information etc.");
		}
</SCRIPT>
<SCRIPT type="text/javascript">
//-------------------------------------------------------------
// This script to be used on both the calling page, and the 
// popped up page/window for doing the selection
//-------------------------------------------------------------
//page wide variables, and some initlial values
var fullVals;
var selectVals;
var pickedVals;
//-------------------------------------------------------------
//Populates the selected list with the clicked on item
function pickIt(){
	var selectList = document.getElementById("flSelectList");
	var selectIndex = selectList.selectedIndex;
	var selectOptions = selectList.options;
	pickedVals[pickedVals.length] = new Array(selectOptions[selectIndex].value,
selectOptions[selectIndex].text);
	selectVals.splice(selectIndex, 1);
	removeFromFullVals(selectOptions[selectIndex].value);
	loadSelectArray();
	loadPickedArray();
	selectIndex = null;
}
//-------------------------------------------------------------
//Removes an item from the picked list
function unselectIt(){
	var pickedList = document.getElementById("flPickedList");
	var pickedIndex = pickedList.selectedIndex;
	var pickedOptions = pickedList.options;
	var pickedLength = pickedOptions.length;
	pickedVals = new Array();
	ii = 0;
	for (var i=0; i < pickedLength; i++){
		if (i != pickedIndex){
			pickedVals[ii] = new Array(pickedOptions[i].value, pickedOptions[i].text);
		ii++;
		}
		else{
			fullVals[fullVals.length] = new Array(pickedOptions[i].value,
pickedOptions[i].text);
			//selectVals[selectVals.length] = new Array(pickedOptions[i].value,
pickedOptions[i].text);
		}
	}
	loadSelectArray();
	loadPickedArray();
	pickedList.blur();
	//document.getElementById("flSeeker").focus();
}
//-------------------------------------------------------------
//populates the picked list display from the array of picked items
function loadPickedArray(){
	var pickedList = document.getElementById("flPickedList");
	var pickedIndex = pickedList.selectedIndex;
	var pickedOptions = pickedList.options;
	pickedOptions.length = 0;
	pickedVals.sort();
	for ( var i=0; i < pickedVals.length; i++ ){
		pickedOptions[i] = new Option(pickedVals[i][1]);
		pickedOptions[i].value = pickedVals[i][0];
	}
	pickedIndex = null;
}
//-------------------------------------------------------------
//populates the slect from list display from the array of selected items
function loadSelectArray(){
	var selectList = document.getElementById("flSelectList");
	var selectIndex = selectList.selectedIndex;
	var selectOptions = selectList.options;
	var selectLength = selectList.length;
	selectOptions.length = 0;
	if (selectVals != null){
		selectVals.sort();
		for ( var i=0; i < selectVals.length; i++ ){
			selectOptions[i] = new Option(selectVals[i][1]);
			selectOptions[i].value = selectVals[i][0];
		}
	}
	selectIndex = null;
}
//-------------------------------------------------------------
//removes a named item from the full list array
function removeFromFullVals(itemName){
	for ( var i=0; i < fullVals.length; i++ ){
		if (fullVals[i][0] == itemName){
			fullVals.splice(i,1);
		}
	}
}
//-------------------------------------------------------------
//Populates the selection list from the 'full values array' 
// using the full list
function listAll(inStr){
	selectVals = fullVals
	loadSelectArray();
}
//-------------------------------------------------------------
function doPopupLoad(){
	self.focus();
	fullVals = new Array(0);
	getFullValsArray();
	selectVals = new Array(0);
	pickedVals = new Array(0);
	//fullVals.sort();
	loadSelectArray();
	loadPickedArray();
	listAll();
}
//-------------------------------------------------------------
</SCRIPT>
</HEAD>
<BODY onLoad="doPopupLoad();">
	<TABLE id="flTopTable" class="flTop" width="350" border="0" cellpadding="0"
cellspacing="0">
		<TR>
			<TD height="66" colspan="3" valign="top">
				<SELECT name="r" id="flSelectList" size="4" class="flSelectList"
onChange="pickIt();">
				</SELECT>
			</TD>
		</TR>
		<TR>
			<TD height="65" colspan="3" valign="top">
				<SELECT name="t" id="flPickedList" size="3" class="flSelectList"
onChange="unselectIt();">
				</SELECT>
			</TD>
		</TR>
	</TABLE>
</BODY>
</HTML>

Comment 1

15 years ago
Created attachment 153307 [details]
Testcase from comment 0

Comment 2

15 years ago
The testcase above uses <select onChange="..."> for the event handling.
It seems that Mozilla gets confused when the <select> is cleared and repopulated
in that handler.
Severity: normal → minor
Keywords: testcase
OS: Windows 2000 → All

Comment 3

15 years ago
Created attachment 153309 [details]
Fixed testcase

Here's an alternative that works (on Linux at least) - it uses onClick on the
individual options instead.  Does it work for you?
(Reporter)

Comment 4

15 years ago
Hi, Thanks for looking at this.   I tried your changes, and they work great in
Firefox, but, unfortunately dosn't work at all on M$ IE [official work browser,
until I manage to persuade otherwise]

I had a bit of a 'hack' around like trying to create an 'attribute' called
'onclick' on the option, but couldn't sus it, IE, just doesn't want to know
aboyt the clicks.

Comment 5

14 years ago
Looking at the first testcase again, clicking twice in the upper list
and then on one of the items in the lower list adds a new item from the
upper list. I think the event is wrongly dispatched to the upper list
because the added item is from the y-position of the event relative to the
upper view.

Comment 6

12 years ago
Seems to work correctly in the latest Firefox trunk build on Linux.

Paul, can you verify this?
http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/

Comment 7

11 years ago
This WORKSFORME in Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9b2) Gecko/2007121016 Firefox/3.0b2
Assignee: events → nobody
QA Contact: ian → events
You need to log in before you can comment on or make changes to this bug.