[bug] ComboBoxItem._mouseDownInPickList()

[antanas.arvasevicius]

Hi, Isomorphic,

I've noticed strange behavior with ComboBoxItem again, and find out that was caused by ComboBoxItem._mouseDownInPickList() method.

Shortly:

1. when i click on combobox picklist item.
2. picklist will get focus, be called hide() and then pickValue(..)
3. ComboBoxItem will be trigger with elementBlur(), because picklist got a focus (in short)
4. elementBlur() will call checkForEditorExit() and that will call handleEditorExit()

5. handleEditorExit() will check if last mouse down event was from picklist and if so then skip any exit logic.

That is done by ComboBoxItem._mouseDownInPickList().
If it fails to do so then any entered values in ComboBoxItem with addUnknownValues=true; will be passed to this._checkForValueFieldValue(value) and be fetched from server.

Meanwhile then fetching is happening pickValue() will do

        var displayValue = this.mapValueToDisplay(value);
        this.setElementValue(displayValue);

and setElementValue() will set value to "Loading.." and hang forever because fetching is still happening ...

Problem is that picklist is immediately hidden then item clicked, and ComboBoxItem._mouseDownInPickList()
returns false.

fix would be remove !pickList.isVisible() checking from first if condition.

_mouseDownInPickList : function () {
        var pickList = this.pickList;
        if (!pickList /*|| !pickList.isVisible()*/ || !pickList.isDrawn()) return false;
        var EH = isc.EH, event = isc.EH.lastEvent;
 //...
}

Issues was seen only on Chrome (don't know maybe it`s because too fast)


Tested on: SmartClient_v100p_2015-07-08_LGPL

[antanas.arvasevicius]

Hi,
I found the core problem to this.
On Chrome if you just click on picklist item while keeping mouse movement then EventHandler's last mouse event will be MOUSE_MOVE
and that _mouseDownInPickList() return false;

               (
                (event.eventType == EH.MOUSE_DOWN || event.eventType == EH.CLICK) && 
                (pickList.contains(event.target,true) || (pickList.filterEditor && pickList.filterEditor.getEditForm() == event.target)) 
               )

here need to add eventType === EH.MOUSE_MOVE check :)

don't know how it happens, but happens in Chrome.

[Isomorphic]

So can you describe how a user would trigger this case, is it:

1. put focus in the ComboBoxItem

2. place the cursor underneath the ComboBox where the picklist *will* appear, with the picklist now showing

3. start typing so the picklist appears

4. click without moving the mouse even one pixel

[antanas.arvasevicius]

1. put focus in the ComboBoxItem

2. place the cursor underneath the ComboBox and type few letters for auto complete where the picklist *will* appear, with the picklist now showing

3. start typing so the picklist appears

4. select some item *WITH* mouse click, but in moving action.

while moving it triggers events: mouse down, mouse move, mouse up.

As I've inspected blur handler will trigger on "mouse down", and do check with _mouseDownInPickList(), but isc.EH.lastEvent will display not a "mouse down" event information but "mouse move" information thats why this method returns false. Strange how this could happen in javascript - like multi threading problem for chrome.

[antanas.arvasevicius]

detailed desc how to reproduce "loading..."


1. put focus in the ComboBoxItem

2. place the cursor underneath the ComboBox where the picklist *will* appear

3. start typing so the picklist appears

4. select some item *WITH* mouse click, but in moving action.

Moving action must be as described here:

move mouse horizontally from item left corner in moving action press mouse down (also you must be moving before mouse down, while continuing movement) continue moving for about ~0.5 second and then mouse up and you should see "Loading..." on title, then combobox complete freezes (no autocomplete)

why it happens:

then you mouse down and continuously moving a cursor you'll get browser focus on an item, and browser blur on combobox input box, so it will trigger blurHandler which will check _mouseDownInPickList() which returns false, and handleEditorExit() will occur.
handleEditorExit() logic will try to fetch and resolve value which was entered manually in combobox.
While fetching is occurring (on mouse up) pickValue() will be triggered in the same time, so

        var displayValue = this.mapValueToDisplay(value);
        this.setElementValue(displayValue);

setElementValue(displayValue) firstly will check the condition "is combobox busy/loading..." and it returns title "Loading.." instead of displayValue;


PS. I can reproduce it in Firefox too.

[antanas.arvasevicius]

I cannot reproduce this issue on Linux Chrome, definitely is something with chrome multithreading on windows. as it looks like onblur and mouse move handlers are called simultaneously (while onblur is executing).

[Isomorphic]

We'll be happy to address this bug if we can reproduce it, but we're struggling to do that - can you show a dynamic form that demonstrates the problem for you?

This is our test code, referencing our sample supplyItem DS:

isc.DynamicForm.create({
    fields : [ 
        { 
            name: "item1", title: "Test", editorType: "ComboBoxItem", addUnknownValues: true,
            optionDataSource: "supplyItem", valueField: "itemID", displayField: "itemName"
        } 
    ]
});

[antanas.arvasevicius]

Hi,

I noticed that popup must be opened opened on the first autocompletion, if you enter the same letter again then I think these items are cached or so and do not work again.


For fast see that is in affect you can see in your demo:

http://www.smartclient.com/#multiComboBoxItem

check box on "Allow New Values"

Then enter letter "a"

on drop down list try to move mouse horizontaly and press mouse down (keep moving) ... in this example you do not need to release a mouse up you'll see that combobox will choose your entered value instead of your "selecting item".

if it not work on the first time then try auto complete letter "b" "c" and so on.

Tested on Windows + latest Chrome/Firefox

You should clearly see a request to server then it happens, because for loading Title... you need to exactly mouse up while request is in progress. So if you are testing in local env maybe request/response is very fast and you cannot visually reproduce "Loading..." you need somehow emulate slow connection, but that action "moving and pressing mouse down and continue moving" should trigger a request to server. if you can produce this you'll find a problem.

[Isomorphic]

Ok, we see this issue as you describe it in our Feature Explorer sample, and that's been addressed for builds dated July 19 and later.

The fix was similar to the one you proposed - does that fix also address the "Loading..." issue you originally reported, but which we haven't reporoduced?

[antanas.arvasevicius]

Yes. It will fix also "Loading.." issue.

As now I'm looking in your code I clearly can understand why it happens.

Then you press mouseDown on picklist item, then combobox gets native blur event,
and it will call
ComboBoxItem.elementBlur() and it will call ComboBoxItem.checkForEditorExit()

if you look at the checkForEditorExit method you'll see:

        if (!delayed && !isc.Browser.isIE) {
            isc.FormItem._pendingEditorExitCheck = this;
            this._delayedEditorExitCheck = this.delayCall("checkForEditorExit", [true]);
            return;
        }

and this call is placed into delay queue. So the "blur handler" is processed and in that little timeframe mouse move action will trigger EventHandler.handleMouseMove() and it will replace isc.EH.lastEvent to "mouse move", and then
delayCall("checkForEditorExit") will be called to execute. Now _mouseDownInPickList() will see not a "mouse down" event but "mouse move" event.

Thats why is happening. And for small applications that "time window" will be very small, and for large application it will be bigger. Or if PC is slower.

[antanas.arvasevicius]

Hi, Isomorphic,

any news about this issue?

[Isomorphic]

Yes, the fix has been in builds since July 19, as we said in our previous post. Have you tried with a build since then?

[antanas.arvasevicius]

Hi, oh, sorry I've not read correctly your previous post, trying to test it out, but got javascript error on build SmartClient_v100p_2015-07-19_LGPL.zip: seems a broken build.

[Note from Isomorphic: These builds have been removed.]

testing with another, will report results soon

[Isomorphic]

It's not clear why you would specifically use that build when it's now 8 days old - but yes, there was a regression last weekend that hit builds for a day or two - just use a newer one :)

[antanas.arvasevicius]

Using diff log with an exact version which fixes a problem I can easily inspect what was changed :)
I can confirm that with SmartClient_v100p_2015-07-25_LGPL now all works fine.

I'm little afraid of that fix in _mouseDownInPickList()

 // last event was a mouseMove and the mouse is still over the mouseDown target
 (event.eventType == EH.MOUSE_MOVE && EH.stillWithinMouseDownTarget())

There is a very tiny probability that user do mouse down in moving in the picklist item corner and just slides off "stillWithinMouseDownTarget()" and then _mouseDownInPickList() will return false. But yeah, its only theoretical, no one will click on item near 1px in item's corner.

Thank you!