View Full Version : Firefox for Mac combobox quirk

22 Feb 2008, 9:27 AM
I have a fairly complex layout (though I'm not sure that matters for this issue) that contains a combo box in a form. When the fields are populated and the dropdown list arrow is clicked in Firefox, the list does not scroll to the selected item. It does in Safari, Opera, and IE. The attached thumbnails show the Firefox result on the left and Safari's correct behavior on the right. The code is a static test html page that should usable by anyone as it requires no external dependencies or servers - just Ext.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"/>

<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>

<script type="text/javascript">
var blankBgStyle = "background-color:#bdc0d9; border:0";

var myData = [
[27,'AA and once again','incline'],
[44,'AA Another test','rowing'],
[11,'Ab Crunch','flat'],
[31,'AB new event handler','rowing'],
[25,'AND and again','incline'],
[50,'And now make it paint','squat'],
[22,'Another new key 2','rowing'],
[24,'another new one','incline'],
[46,'AY huh Do it Now','incline'],
[6,'Bench Press','incline'],
[33,'Did it finally work?','rowing'],
[29,'Double Commit','flat'],
[36,'Final Sorting Test','leg'],
[49,'Fix sort error and Repaint','flat'],
[17,'Friday 1','leg'],
[18,'Friday 2','rowing'],
[21,'Get the key','flat'],
[8,'Leg Extension','leg'],
[7,'Leg Press','rowing'],
[1,'Lying Biceps Curl','flat'],
[2,'Lying Shoulder Press','flat'],
[23,'new one','flat'],
[38,'Now without a sort','squat'],
[26,'one more time','incline'],
[37,'Really last sort test','incline'],
[3,'Rear Deltoid Rows','flat'],
[4,'Reverse Fly','flat'],
[53,'rock on','--'],
[10,'Seated Ab Crunch','incline'],
[9,'Seated Shoulder Press','flat'],
[5,'Seated Triceps Extension','incline'],
[19,'Test add 1','rowing'],
[20,'test add 2','flat'],
[39,'Test Commit single','flat'],
[34,'Test the sort','flat'],
[35,'testing sort again','rowing'],
[15,'the first test','incline'],
[16,'Thursday night test','incline'],
[40,'Tuesday 1','flat'],
[41,'Tuesday 2','leg'],
[42,'Tuesday 3','squat'],
[47,'ZZ Top','squat']

var Exercise = Ext.data.Record.create(
{ name: 'exerID', type: 'int' },
{ name: 'exerName' },
{ name: 'bench' }

var myReader = new Ext.data.ArrayReader({}, Exercise);

var combostore = new Ext.data.Store(
proxy: new Ext.data.MemoryProxy(myData),
reader: myReader,
autoLoad: true,
sortInfo: { field: "exerName", direction: "ASC" }

var repDetailsPanel = new Ext.Panel(
layout: 'border',
id: 'card2',
hideMode: 'offsets', // this makes combo box drop list width accurate
bodyStyle: blankBgStyle,
items: [
repDetailsForm = new Ext.form.FormPanel(
id: 'repDetailsForm',
region: 'north',
url: 'saveRep.jsp', // not important for this issue
method: 'POST',
onSubmit: Ext.emptyFn,
monitorValid: true,
defaultType: 'numberfield',
labelAlign: 'top',
buttonAlign: 'left',
bodyStyle: blankBgStyle,
items: [
name: 'workoutID',
xtype: 'hidden'
name: 'repID',
xtype: 'hidden'
// the combo box
fieldLabel: 'Exercise',
hiddenName: 'exerciseID',
tabIndex: 1,
id: 'exCombo',
xtype: 'combo',
allowBlank: false,
forceSelection: true,
typeAhead: true,
triggerAction: 'all',
selectOnFocus: true,
lazyInit: false, // tried all combinations
lazyRender: true, // of these two as well
mode: 'local',
store: combostore,
valueField: 'exerID',
displayField: 'exerName'
fieldLabel: 'Weight',
name: 'weight',
allowBlank: false,
allowDecimals: false,
allowNegative: false,
maxLength: 3,
selectOnFocus: true,
tabIndex: 2,
validationDelay: 100,
width: 32
fieldLabel: 'Reps',
name: 'lifts',
allowBlank: false,
allowDecimals: false,
allowNegative: false,
maxLength: 2,
selectOnFocus: true,
validationDelay: 100,
tabIndex: 3,
width: 25
buttons: [
text: 'Save',
formBind: true,
handler: Ext.emptyFn // for demo purposes
text: 'Cancel',
handler: Ext.emptyFn // for demo purposes
new Ext.Panel({
region: 'center',
bodyStyle: blankBgStyle

var viewport = new Ext.Viewport(
layout: "border",
renderTo: Ext.getBody(),
region: "north",
title: "Test",
bodyStyle: blankBgStyle,
height: 20
new Ext.TabPanel({
region: 'center',
title: "Tab Panel",
activeTab: 0,
title: "Tab 1",
bodyStyle: blankBgStyle,
html: "<p>First panel</p>"
title: "Tab 2",
bodyStyle: blankBgStyle,
html: "<p>Second panel</p>"
title: "Tab 3",
bodyStyle: blankBgStyle,
html: "<p>Third panel</p>"
// right-side card layout panel
spanel = new Ext.Panel(
region: "east",
layout: "card",
activeItem: 'card1',
title: "Card Panel",
width: 400,
animCollapse: false,
collapsible: true,
collapseMode: 'mini',
collapsed: false,
hideCollapseTool: true,
split: true,
items: [
new Ext.Panel(
id: 'card1',
autoScroll: true,
bodyStyle: blankBgStyle,
html: "<p>Card One</p>"
bbar: [
{ text: "One", handler: function() { spanel.getLayout().setActiveItem("card1"); } },
{ text: "Two", handler: function()
// load with a fixed record to test the select highlight in the form
repDetailsForm.getForm().setValues({ workoutID: 1, repID: 0, exerciseID: 53, weight: '50', lifts: '10' });
});//end onReady function

22 Feb 2008, 9:28 AM
FF2.x on the mac has some very strange problems.

22 Feb 2008, 9:40 AM
I didn't realize it was only the Mac, but just tried it in Windows and you're right. It works as it should in FF in XP just like Opera and Safari on the Mac. Is there any kind of fix or "kludge" for this or is it just something we live with?

Anyone know how to edit the original thread title? I was going to make it more specific (ie, for Mac).

22 Feb 2008, 10:08 AM
Do it by edit, then advanced.

you'll notice FF for the mac has issues w/ the scroll bars popping through ext's windows.

Also, i have issues with the enter button not working in text areas at random. FF is getting on my nerves lately.

22 Feb 2008, 10:37 AM
well there's a theme hack for FF Mac which fixes some (all?) scrollbar issues FWIW:

not sure how you're going to convince your users to install it though.

and there's a link to this in that post:

22 Feb 2008, 12:15 PM
I was messing around trying to see if I could code a hack to this in Ext as a workaround without users having to install a theme, and in doing so found that after clicking the arrow if I press the up arrow followed by the down arrow, it displays correctly, showing me the item currently selected. If I'm at the top so it cannot go up, the highlight will end up one below. But that is something I can code around (assuming I can determine when the selected item is the first one) if I could only get the manual up/down keys to be automated.

I looked into event handling and specialkeys and came up with this:

// try to "fix" Firefox Mac bug
myCombo.on("expand", function(cb)
if(Ext.isMac && Ext.isGecko)
cb.fireEvent("specialkey", cb, Ext.EventObject.UP);
cb.fireEvent("specialkey", cb, Ext.EventObject.DOWN);

Unfortunately, it doesn't seem to do anything. I thought it would make the app think the user pressed up then down on the keyboard, thus solving this issue. Obviously, it should only be done for FF on the Mac which the simple if condition handles well. When I run it in FireBug, it is getting called, the if passes, and no errors are thrown. If I put a breakpoint on the first fireEvent, the click the Play to continue, the list updates to the desired result. It does not w/o bkpts or Firebug.

Can anyone help with this idea? Has anybody successfully "emulated" a keystroke using Ext events?