scanning: Set selected option when dropdown options change

This changes fixes a bug where the wrong option in the dropdown is
selected when the selected scanner is changed. This happens when the new
scanner has different available options than the previously selected
scanner.

Bug: 1166808
Change-Id: I2f81f39358ad6c104e1dc360d429cc14cbe94055
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2633087Reviewed-by: Jesse Schettler <jschettler@chromium.org>
Commit-Queue: Gavin Williams <gavinwill@chromium.org>
Cr-Commit-Position: refs/heads/master@{#844279}

chrome/test/data/webui/chromeos/scanning/color_mode_select_test.js

@@ -9,7 +9,7 @@ import {getColorModeString} from 'chrome://scanning/scanning_app_util.js';
 
 import {assertEquals, assertFalse, assertTrue} from '../../chai_assert.js';
 
-import {assertOrderedAlphabetically} from './scanning_app_test_utils.js';
+import {assertOrderedAlphabetically, changeSelect} from './scanning_app_test_utils.js';
 
 const ColorMode = {
   BLACK_AND_WHITE: chromeos.scanning.mojom.ColorMode.kBlackAndWhite,
@@ -81,4 +81,31 @@ export function colorModeSelectTest() {
         ColorMode.BLACK_AND_WHITE.toString(),
         colorModeSelect.selectedColorMode);
   });
+
+  // Verify the correct default option is selected when a scanner is selected
+  // and the options change.
+  test('selectDefaultWhenOptionsChange', () => {
+    const select =
+        /** @type {!HTMLSelectElement} */ (colorModeSelect.$$('select'));
+    colorModeSelect.colorModes =
+        [ColorMode.GRAYSCALE, ColorMode.BLACK_AND_WHITE, ColorMode.COLOR];
+    flush();
+    return changeSelect(select, /* value */ null, /* selectedIndex */ 0)
+        .then(() => {
+          assertEquals(
+              ColorMode.BLACK_AND_WHITE.toString(),
+              colorModeSelect.selectedColorMode);
+          assertEquals(
+              ColorMode.BLACK_AND_WHITE.toString(),
+              select.options[select.selectedIndex].value);
+
+          colorModeSelect.colorModes = [ColorMode.GRAYSCALE, ColorMode.COLOR];
+          flush();
+          assertEquals(
+              ColorMode.COLOR.toString(), colorModeSelect.selectedColorMode);
+          assertEquals(
+              ColorMode.COLOR.toString(),
+              select.options[select.selectedIndex].value);
+        });
+  });
 }

chrome/test/data/webui/chromeos/scanning/page_size_select_test.js

@@ -89,4 +89,28 @@ export function pageSizeSelectTest() {
     // default when Letter is not an available option.
     assertEquals(PageSize.A4.toString(), pageSizeSelect.selectedPageSize);
   });
+
+  // Verify the correct default option is selected when a scanner is selected
+  // and the options change.
+  test('selectDefaultWhenOptionsChange', () => {
+    const select =
+        /** @type {!HTMLSelectElement} */ (pageSizeSelect.$$('select'));
+    pageSizeSelect.pageSizes = [PageSize.Letter, PageSize.Max, PageSize.A4];
+    flush();
+    return changeSelect(select, /* value */ null, /* selectedIndex */ 0)
+        .then(() => {
+          assertEquals(PageSize.A4.toString(), pageSizeSelect.selectedPageSize);
+          assertEquals(
+              PageSize.A4.toString(),
+              select.options[select.selectedIndex].value);
+
+          pageSizeSelect.pageSizes = [PageSize.Letter, PageSize.Max];
+          flush();
+          assertEquals(
+              PageSize.Letter.toString(), pageSizeSelect.selectedPageSize);
+          assertEquals(
+              PageSize.Letter.toString(),
+              select.options[select.selectedIndex].value);
+        });
+  });
 }

chrome/test/data/webui/chromeos/scanning/resolution_select_test.js

@@ -81,4 +81,23 @@ export function resolutionSelectTest() {
     // default when 300 is not an available option.
     assertEquals('1200', resolutionSelect.selectedResolution);
   });
+
+  // Verify the correct default option is selected when a scanner is selected
+  // and the options change.
+  test('selectDefaultWhenOptionsChange', () => {
+    const select =
+        /** @type {!HTMLSelectElement} */ (resolutionSelect.$$('select'));
+    resolutionSelect.resolutions = [600, 300, 150];
+    flush();
+    return changeSelect(select, /* value */ null, /* selectedIndex */ 0)
+        .then(() => {
+          assertEquals('600', resolutionSelect.selectedResolution);
+          assertEquals('600', select.options[select.selectedIndex].value);
+
+          resolutionSelect.resolutions = [300, 150];
+          flush();
+          assertEquals('300', resolutionSelect.selectedResolution);
+          assertEquals('300', select.options[select.selectedIndex].value);
+        });
+  });
 }

chrome/test/data/webui/chromeos/scanning/scanning_app_test_utils.js

@@ -64,10 +64,12 @@ function strToMojoString16(str) {
 export function changeSelect(select, value, selectedIndex) {
   if (value) {
     select.value = value;
-  }
-  if (selectedIndex) {
+  } else if (selectedIndex !== null) {
     select.selectedIndex = selectedIndex;
+  } else {
+    return Promise.reject();
   }
+
   select.dispatchEvent(new CustomEvent('change'));
   return flushTasks();
 }

chromeos/components/scanning/resources/color_mode_select.js

@@ -53,21 +53,19 @@ Polymer({
   },
 
   /**
-   * Use the default option if it exists. If not, use the first color mode in
-   * the color modes array.
-   * @return {string}
+   * Get the index of the default option if it exists. If not, use the index of
+   * the first color mode in the color modes array.
+   * @return {number}
    * @private
    */
-  getDefaultSelectedColorMode_() {
+  getDefaultSelectedColorModeIndex_() {
     assert(this.colorModes.length > 0);
 
     const defaultColorModeIndex = this.colorModes.findIndex((colorMode) => {
       return this.isDefaultColorMode_(colorMode);
     });
 
-    return defaultColorModeIndex === -1 ?
-        this.colorModes[0].toString() :
-        this.colorModes[defaultColorModeIndex].toString();
+    return defaultColorModeIndex === -1 ? 0 : defaultColorModeIndex;
   },
 
   /**
@@ -83,7 +81,10 @@ Polymer({
     }
 
     if (this.colorModes.length > 0) {
-      this.selectedColorMode = this.getDefaultSelectedColorMode_();
+      const selectedColorModeIndex = this.getDefaultSelectedColorModeIndex_();
+      this.selectedColorMode =
+          this.colorModes[selectedColorModeIndex].toString();
+      this.$.colorModeSelect.selectedIndex = selectedColorModeIndex;
     }
   },
 

chromeos/components/scanning/resources/page_size_select.js

@@ -52,20 +52,17 @@ Polymer({
   },
 
   /**
-   * Letter should be the default option if it exists. If not, use the first
-   * page size in the page sizes array.
-   * @return {string}
+   * Get the index of the default option if it exists. If not, use the index of
+   * the first page size in the page sizes array.
+   * @return {number}
    * @private
    */
-  getDefaultSelectedPageSize_() {
+  getDefaultSelectedPageSizeIndex_() {
     let defaultPageSizeIndex = this.pageSizes.findIndex((pageSize) => {
       return this.isDefaultPageSize_(pageSize);
     });
-    if (defaultPageSizeIndex === -1) {
-      defaultPageSizeIndex = 0;
-    }
 
-    return this.pageSizes[defaultPageSizeIndex].toString();
+    return defaultPageSizeIndex === -1 ? 0 : defaultPageSizeIndex;
   },
 
   /**
@@ -90,7 +87,9 @@ Polymer({
     }
 
     if (this.pageSizes.length > 0) {
-      this.selectedPageSize = this.getDefaultSelectedPageSize_();
+      const selectedPageSizeIndex = this.getDefaultSelectedPageSizeIndex_();
+      this.selectedPageSize = this.pageSizes[selectedPageSizeIndex].toString();
+      this.$.pageSizeSelect.selectedIndex = selectedPageSizeIndex;
     }
   },
 

chromeos/components/scanning/resources/resolution_select.js

@@ -53,19 +53,17 @@ Polymer({
   },
 
   /**
-   * 300 dpi should be the default option if it exists. If not, use the first
-   * resolution in the resolutions array.
-   * @return {string}
+   * Get the index of the default option if it exists. If not, use the index of
+   * the first resolution in the resolutions array.
+   * @return {number}
    * @private
    */
-  getDefaultSelectedResolution_() {
+  getDefaultSelectedResolutionIndex_() {
     const defaultResolutionIndex = this.resolutions.findIndex((resolution) => {
       return this.isDefaultResolution_(resolution);
     });
 
-    return defaultResolutionIndex === -1 ?
-        this.resolutions[0].toString() :
-        this.resolutions[defaultResolutionIndex].toString();
+    return defaultResolutionIndex === -1 ? 0 : defaultResolutionIndex;
   },
 
   /**
@@ -82,7 +80,10 @@ Polymer({
     }
 
     if (this.resolutions.length > 0) {
-      this.selectedResolution = this.getDefaultSelectedResolution_();
+      const selectedResolutionIndex = this.getDefaultSelectedResolutionIndex_();
+      this.selectedResolution =
+          this.resolutions[selectedResolutionIndex].toString();
+      this.$.resolutionSelect.selectedIndex = selectedResolutionIndex;
     }
   },