Firefox 40 Broken: Cannot Select Option

[jcobban]

I have a popup dialog in my application that contains a selection list. The exact contents of the dialog depends upon the environment when it is invoked, but at the moment, according to Firebug, its current state is:

Code: Select all

<div id="IdirDialog" class="balloon" style="display: block; position: absolute; visibility: visible; left: 593px; top: 405px;">
<form id="idirChooserForm" name="idirChooserForm">
<p class="label">Lewis, Esther born 1823 </p>
<p>
<select id="chooseIdir" size="5" name="chooseIdir">
<option value="0">Choose from the following partial matches:</option>
<option value="87340">Lewis (), Esther Wifeofsamuellewis(3 Mar 1823-), spouse of Samuel Lewis</option>
</select>
</p>
<p>
<button id="choose06" type="button">Cancel</button>
</p>
</form>
</div>

This dialog worked up until just now when I installed the latest fixes on 40.0. The exact version is firefox 40.0+build4-0ubuntu0.15.04.1. I checked the DOM and the onchange method is set for the <select> and disabled is false but I cannot select either of the entries. Nothing changes visually when I click on an item, and the onchange method is not called. Other <select>s are still working. This is the only one that I have encountered so far that is not working.

[LoudNoise]

Moving to Extension dev since this seems to be the case.

[Noitidart]

Hm things are working fine for me. Is this in the regular html tab scope?

[jcobban]

Moving to Extension dev since this seems to be the case.

I just checked and it doesn't work on Chromium either, so there is something wrong with the page. But I do not understand what. The only action I took between the time the page worked and when it didn't work was applying the latest fixes to Firefox. The last change to the javascript file that initializes and displays the dialog was on July 27th, and the last change to the module containing the basic HTML of the dialog was last January, and I have certainly used this feature in the last 2 weeks. In any event the last change to the javascript file was not in any of the code relating to this dialog. The last change to the functions that display the dialog was on January 20th, and that was just to add additional information into the text of each option. The javascript file is 3516 lines long and is viewable at www.jamescobban.net/database/CensusForm.js. The function doIdir is the onclick method of a button. It sends an AJAX request to the server. The contents of the response are used to customize the dialog. If desirable I can explain how to get to the page and try the functionality, but it is sort of deep in the bowels of the web-site and requires signing on to the site.

[jcobban]

Hm things are working fine for me. Is this in the regular html tab scope?

As I said every other <select> that I have tried so far works fine. I just do not see what is special about this one.

[lithopsian]

Does it still work in Firefox 39? (Or Firefox 38ESR if you have that instaled).

Console errors?

Are you able to put diagnostics in the script? Or use Firebug to step through the javascript? Find out if the handlers are firing and failing, or not firing at all.

You mentioned that doIDir is not being called. Is onclick actually being set? Does it still have the correct value in DOM when you inspect?

[jcobban]

Does it still work in Firefox 39? (Or Firefox 38ESR if you have that instaled).

Console errors?

Are you able to put diagnostics in the script? Or use Firebug to step through the javascript? Find out if the handlers are firing and failing, or not firing at all.

You mentioned that doIDir is not being called. Is onclick actually being set? Does it still have the correct value in DOM when you inspect?

The onclick function doIdir IS called when the button is clicked, the AJAX request is sent and when the response comes in the contents of the dialog are customized and it is positioned and made visible. The dialog is displayed just to the left and below the requesting button as shown here http://www.jamescobban.net/Images/dialogDisplayed.png


However the onchange method for the selection list is NOT being called when I select an item. I put an alert at the beginning of the function. The DOM display shows that the onchange method is defined and disabled is false.


The following is a composite screenshot of the DOM display for the <select> on the web at http://www.jamescobban.net/Images/selectDOM.png. Perhaps someone can explain why the onchange method is not being fired when I select one of the options.


Clink on the links to view the images. They were breaking the forum format --LN

[jcobban]

Hm things are working fine for me. Is this in the regular html tab scope?

The <select> is in a <form> which is in a <div> which is within the <body>

[jcobban]

Does it still work in Firefox 39? (Or Firefox 38ESR if you have that instaled).

I found I had a back-level copy of Ubuntu 15.04 in a VirtualBox image that still had Firefox 39. I tried it and the web-site does work in Firefox 39.

[lithopsian]

Have you tried setting an attribute instead of the property? Or better yet an event listener? This code has been healvily changed for the upcoming Firefox multi-process. Something may have got mangled, but it is hard to tell what since it works most of the time.

[jcobban]

Have you tried setting an attribute instead of the property? Or better yet an event listener? This code has been healvily changed for the upcoming Firefox multi-process. Something may have got mangled, but it is hard to tell what since it works most of the time.

By testing I have determined that if I use the keyboard to manipulate the <select> that the onchange handler is called. To facilitate this I changed the implementation to set the focus on the <select> when the dialog is displayed, which is logical behavior anyway. I added an event listener for "mousedown" to the <select> and it fired. So the mouse click is getting through to the element but is not being used to select the option and fire the onchange method. Mouse clicks work on every <select> I have tested that was generated from the initial HTML load. It is only <select>s added to the DOM by javascript that are not responding to the mouse in FF 40.

[lithopsian]

Possibly a bug, but realistically you're going to have to create a much simpler test case to have any hope of it being diagnosed and fixed.

[jcobban]

Possibly a bug, but realistically you're going to have to create a much simpler test case to have any hope of it being diagnosed and fixed.

Possibly. I just do not know how to do it in less than 400 lines of Javascript code. I have developed a bypass which is:

for(var io=0; io < select.options.length; io++)
{
var option = select.options[io];
option.addEventListener("click", function() {this.selected = true; this.parentNode.onchange();});
}

This makes the code work on both FF 40.0 and Chromium. It does mean that on other browsers the onchange method is called twice, but all the onchange method does is change the text of the button, so a double call is not a problem.

[lithopsian]

Using an event listener for the change event directly gives you the opportunity to play with things like capturing and find out why it isn't firing. Clicks are clearly getting though to the child elements, so obviously getting lost or blocked at some point. Track down where those events are bubbling to and not bubbling to. For example, if the change event fires at capturing, but doesn't appear when not capturing, you're pretty close to knowing what is wrong.

[jcobban]

Using an event listener for the change event directly gives you the opportunity to play with things like capturing and find out why it isn't firing. Clicks are clearly getting though to the child elements, so obviously getting lost or blocked at some point. Track down where those events are bubbling to and not bubbling to. For example, if the change event fires at capturing, but doesn't appear when not capturing, you're pretty close to knowing what is wrong.

I appreciate your advice. The mouse operations are clearly getting through to the <select> since they can get through to the <option>s. I just tried adding a click handler to the <select> and it fires, but the change handler does not! I have tried adding an explicit change event listener to the <select>. Firebug then shows that there are TWO change event listeners on the <select> but neither of them fire. I have tried building a simpler test case at http://www.jamescobban.net/PopupDialogTest.html that does all of the essential steps involved: getting the innerHTML of the <form> element, doing the text substitutions, appending it to the <div> and then displaying the <div>, but that works like a charm. I just have no idea how to recreate this in a way that the fundamental difference between FF39 and FF40 can be identified. Plus the issue is more fundamental than that because the code also does not work on Chromium! I imagine that the Mozilla and WebKit people look at each other's code but I am certain they do not blindly copy anything.