Conflicting SELECTION events

[benloh]

In qa'ing #68, we discovered a minor bug where clicking on a node when setting a source or target during an edge edit would inadvertently cancel the edit and select the node instead.

To replicate:

1. Select an edge.
2. Click "Edit Edge"
3. Click "Change Target" or "Change Source", whichever is available.
4. Click in the AutoComplete field like you're about to type the node name
5. Change your mind and click on the node in the graph instead.
6. The edge edit will exit and instead the node you clicked in the graph will be selected and displayed.

This bug is an instance where multiple events are triggering conflicting actions. When you click on the node in the graph, two different events are triggered:

a. The AutoComplete field triggers an onBlur event because the field has lost the focus. This triggers a SELECTION event.
b. The node you clicked on in the graph triggers a second SELECTION event.

The two SELECTION events conflict with each other. What happens in practice is the AutoComplete onBlur event is triggered first, so the clicked-on node is selected (and all corresponding edges deselected/selected). By the time the EdgeEditor receives the graph click/selection event, the edge being edited is already gone.

The AutoComplete blur functionality was there to allow users to select a node by simply typing the name and tabbing out.

Tentative Solution

The quick fix solution is to remove the onBlur functionality. The functionality was problematic to begin with because hitting Return when typing in AutoComplete during an Edge Edit actually triggers an Edge Submit, so the typed-in edge isn't even selected. But this affects other functionality elsewhere. See Implications below.

Implications

• You can still type in any AutoComplete field. But selection now requires an explicit click from the suggestions list.
• If you want to use keyboard only, you can still use the arrow keys to select an item in the suggestions list, hitting return to select it.
• The onBlur wasn't being properly triggered

We need to explore alternative approaches.

[benloh]

Exploring this further...

Why isn't this a problem with NodeSelector? NodeSelector will ignore the SELECTION updates if it's in an isEditable state, so the SELECTION event won't cause it to abandon the edit and load the SELECTION node.

Can we do that with EdgeEditor? There are two issues:

1. EdgeEditor is a child of NodeSelector. So EdgeEditor would have to let NodeSelector know that it's in editable state. NodeSelector probably would need a new flag to track whether its being locked by an EdgeEditor.

2. EdgeEditor would have to know how to distinguish between an intentional blur event (e.g. user has typed the name of a valid new node they wish to select and has tabbed out) vs. a side-effect blur event (e.g. the user has decided to click on a node instead, and by clicking outside of the field, they trigger the AutoComplete onBlur).

3. This actually works well so long as the EdgeEditor's AutoComplete field doesn't have a valid node label. If it's not a valid node label, onBlur does not select the node, and the next d3 click SELECTION properly loads.

The sequence of events is this:

1. Click Edit Node
2. Click on AutoComplete field.
3. Click on node in graph
4. AutoComplete onBlur event
5. nc-logic triggers onBlur node SELECTION (orig node)
6. NodSelector handles node SELECTION event (orig node)
7. AutoComplete handles node SELECTION event (orig node)
8. EdgeEditor handles node SELECTION event (orig node)
9. d3simplenetgraph.click event (new node)
10. NodSelector handles node SELECTION event (new node)
11. AutoComplete handles node SELECTIOn event (new node)
12. EdgeEditor handles node SELECTION event (new node)

POSSIBLE SOLUTIONS:

A. Actually if NodSelector is locked out and does not load a new node at 6), then this might work, because the AutoComplete and EdgeEditor SELECTIOn events with the old node would be quickly replaced by the new node. NodeSelector actually already knows about EdgeEditor being in edit mode because EdgEditor sends EDGEEDIT_LOCK and EDGEEDIT_UNLOCK calls.
=> This doesn't quite work because even though NodeSelector ignores the SELECTIOn call, AutoComplete and EdgeEditor do not. And when they receive the node, they mark the node selected and revert AutoComplete to search mode.

B. Give up onBlur or give up node-selection-via-clicking?
=> This removes the ability to use the keyboard for quick selection.

C. Clear the field when you click "Change Target"?
We didn't want to clear the field as soon as you click "Change Source" or "Change Target" because you would not know/remember which target you were changing. However, the AutoComplete field does have placeholder text. So we can show the last target as the placeholder. This way, if you click in the field and then click away, the field does not find a valid node, so the SELECTION is ignored. The field remains cleared until you select a valid node.
=> The downside to this approach is if you click "Change Source/Change Target" then change your mind, you have to hunt down your original node. Though you could "Cancel" the whole edge edit too.

[benloh]

Pull Request #71 implements Solution C.