AutoComplete: Select node onBlur

[benloh]

From Issue #58:

The Problem

The AutoComplete field is designed to support a variety of input methods, including selecting by clicking on the graph and typing a partial name, viewing suggestions, and selecting a suggestion. This generally works well when it's used in the Search field or the NodeSelector form.

When editing an edge, the AutoComplete field is also used to set the Source (and more commonly) the Target nodes. This generally works well when the user either clicks on a node on the graph to select it, or when using type-ahead to select a node -- they type a partial node name, then they click on the full name in the suggestion. This works because clicking on a suggested node triggers a SOURCE_SELECT event, where we can verify that the selected node is a valid node.

The problem occurs when the user types in the full name of the node and then hits Tab to go on to the next field. In this case, no event is triggered, so we never verify that the node name typed in is a valid node, and therefore we don't re-enable the "Save" button.

To replicate:

1. Select a node
2. Click "Add New Edge"
3. Type the name of another edge and hit "tab"
4. The "Save" button remains disabled because the system doesn't know we have selected a valid target node.

The Solution

We use the onBlur event on the AutoComplete field to trigger a review of the current field value. If the value in the AutoComplete field is an exact match with a node label, select the label.

To Test

1. Select a node
2. Click "Add New Edge"
3. Type the full name of another edge and hit "tab"
4. The target node should be properly set (You'll see the "Switch Source/Target" button and the "Change Target" button appear).
5. The "Save" button should be enabled.

A few more points:

• You should test to make sure also that typing in an incomplete label or a non-matching label does not select a node.
• This is a case sensitive search: So typing "alexander" will not autoselect "Alexander" and the "Save" button will remain disabled.

This has the side effect of also allowing selection of a node via the Search field:

1. Click in the Search Field
2. Type in the complete name of a label, e.g. "alexander"
3. Hit tab
4. The "Alexander" node will be loaded in the NodeSelector form.

[benloh]

@kalanicraig @jdanish Could either of you please test out this pull request to

1. confirm that this is the problem you had identified in trello: https://trello.com/c/IcEwxQvq/158-bug-tabbing-out-of-target-selection-does-not-enable-save-button
2. that this does indeed fix the problem?

[kalanicraig]

I have just tested it! It works. The tab-out-of-Target-field was the problem, and the select-node-onblur branch that I just pulled fixes it.

To test, I:

1. Selected a node
2. Chose an edge type
3. Put my cursor into the Target field by clicking.
4. Typed a few letters and hit tab to autocomplete the only entry that was available
5. Clicked "save"