Add invalid status to cr-searchable-drop-down

-Add a property to cr-searchable-dropdown so we can track whether the
 user's current text input in the dropdown matches the previously
 saved value. This flag will be used to disable certain user actions
 if the dropdown is invalid.

Bug: 950887
Change-Id: I578086632568dc0e76ec8bb2726dd002158392dc
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2016334Reviewed-by: Bailey Berro <baileyberro@chromium.org>
Reviewed-by: Steven Bennetts <stevenjb@chromium.org>
Commit-Queue: Gavin Williams <gavinwill@chromium.org>
Cr-Commit-Position: refs/heads/master@{#736008}

chrome/test/data/webui/cr_elements/cr_searchable_drop_down_tests.js

@@ -108,17 +108,20 @@ suite('cr-searchable-drop-down', function() {
     search('c');
     assertEquals(1, getList().length);
     assertEquals('cat', getList()[0].textContent.trim());
+    assertTrue(dropDown.invalid);
 
     search('at');
     assertEquals(3, getList().length);
     assertEquals('cat', getList()[0].textContent.trim());
     assertEquals('hat', getList()[1].textContent.trim());
     assertEquals('rat', getList()[2].textContent.trim());
+    assertTrue(dropDown.invalid);
 
     search('ra');
     assertEquals(2, getList().length);
     assertEquals('rat', getList()[0].textContent.trim());
     assertEquals('rake', getList()[1].textContent.trim());
+    assertTrue(dropDown.invalid);
   });
 
   test('value is set on click', function() {
@@ -133,6 +136,7 @@ suite('cr-searchable-drop-down', function() {
     // Make sure final value does not change while searching.
     search('ta');
     assertEquals('dog', dropDown.value);
+    assertTrue(dropDown.invalid);
   });
 
   // If the update-value-on-input flag is passed, final value should be whatever
@@ -150,6 +154,7 @@ suite('cr-searchable-drop-down', function() {
     // Make sure final value does change while searching.
     search('ta');
     assertEquals('ta', dropDown.value);
+    assertFalse(dropDown.invalid);
   });
 
   test('click closes dropdown', function() {
@@ -353,11 +358,14 @@ suite('cr-searchable-drop-down', function() {
 
     getList()[0].click();
     assertEquals('dog', searchInput.value);
+    assertFalse(dropDown.invalid);
 
     // Make sure the search box value changes back to dog
     search('ta');
+    assertTrue(dropDown.invalid);
     blur();
     assertEquals('dog', searchInput.value);
+    assertFalse(dropDown.invalid);
   });
 
   // When a user types in the dropdown but does not choose a valid option, the
@@ -369,10 +377,29 @@ suite('cr-searchable-drop-down', function() {
 
     getList()[0].click();
     assertEquals('dog', searchInput.value);
+    assertFalse(dropDown.invalid);
 
     // Make sure the search box value keeps the same text
     search('ta');
+    assertFalse(dropDown.invalid);
     blur();
     assertEquals('ta', searchInput.value);
+    assertFalse(dropDown.invalid);
+  });
+
+  // In certain cases when a user clicks their desired option from the dropdown,
+  // the on-blur event is fired before the on-click event. This test is to
+  // guarantee expected behavior given a proceeding blur event.
+  test('blur event when option is clicked', function() {
+    setItems(['cat', 'hat', 'rat', 'rake']);
+
+    search('rat');
+    assertEquals(1, getList().length);
+    assertEquals('rat', getList()[0].textContent.trim());
+
+    blur();
+    getList()[0].click();
+
+    assertEquals('rat', dropDown.value);
   });
 });

ui/webui/resources/cr_elements/cr_searchable_drop_down/cr_searchable_drop_down.js

@@ -9,6 +9,10 @@
  * If the update-value-on-input flag is set, value will be set to whatever is
  * in the input box. Otherwise, value will only be set when an element in items
  * is clicked.
+ *
+ * The |invalid| property tracks whether the user's current text input in the
+ * dropdown matches the previously saved dropdown value. This property can be
+ * used to disable certain user actions when the dropdown is invalid.
  */
 Polymer({
   is: 'cr-searchable-drop-down',
@@ -48,6 +52,20 @@ Polymer({
 
     placeholder: String,
 
+    /**
+     * Used to track in real time if the |value| in cr-searchable-drop-down
+     * matches the value in the underlying cr-input. These values will differ
+     * after a user types in input that does not match a valid dropdown option.
+     * |invalid| is always false when |updateValueOnInput| is set to true. This
+     * is because when |updateValueOnInput| is set to true, we are not setting a
+     * restrictive set of valid options.
+     */
+    invalid: {
+      type: Boolean,
+      value: false,
+      notify: true,
+    },
+
     /** @type {!Array<string>} */
     items: {
       type: Array,
@@ -58,6 +76,7 @@ Polymer({
     value: {
       type: String,
       notify: true,
+      observer: 'updateInvalid_',
     },
 
     /** @type {string} */
@@ -357,6 +376,9 @@ Polymer({
     // but scollable dropdown. Refitting the dropdown allows it to expand to
     // accommodate the new items.
     this.enqueueDropdownRefit_();
+
+    // Need check to if the input is valid when the user types.
+    this.updateInvalid_();
   },
 
   /*
@@ -421,5 +443,18 @@ Polymer({
     if (!this.updateValueOnInput) {
       this.$.search.value = this.value;
     }
-  }
+
+    // Need check to if the input is valid when the dropdown loses focus.
+    this.updateInvalid_();
+  },
+
+  /**
+   * If |updateValueOnInput| is true then any value is allowable so always set
+   * |invalid| to false.
+   * @private
+   */
+  updateInvalid_: function () {
+    this.invalid =
+        !this.updateValueOnInput && (this.value !== this.$.search.value);
+  },
 });