Open Bug 251538 Opened 20 years ago Updated 2 years ago

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

Categories

(Core :: DOM: UI Events & Focus Handling, defect)

Product:
Core
Component:
DOM: UI Events & Focus Handling
Platform:
x86
All
Type:
defect

Tracking

()

Status:
UNCONFIRMED

People

(Reporter: paul.wemyss, Unassigned)

Details

(Keywords: testcase)

Attachments

(2 files)

Testcase from comment 0
5.74 KB, text/html
Details
Fixed testcase
5.54 KB, text/html
Details 
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>
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
Attached file 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?
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.
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.
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/

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
Component: Event Handling → User events and focus handling
Severity: minor → S4
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: