Merge pull request vaadin#13 from vaadin/feature/value

Enabled selecting an item from a static list (fixes vaadin#10)
CommerceExperts · Oct 19, 2015 · ade2d4d · ade2d4d
2 parents 2d7c4c6 + 107a294
commit ade2d4d
Show file tree

Hide file tree

Showing 5 changed files with 116 additions and 15 deletions.
diff --git a/bower.json b/bower.json
@@ -19,19 +19,20 @@
   },
   "license": "Apache License 2.0",
   "dependencies": {
+    "components-demo-resources": "vaadin/components-demo-resources#master",
     "iron-dropdown": "polymerelements/iron-dropdown#~1.0.5",
     "iron-flex-layout": "PolymerElements/iron-flex-layout#~1.0.3",
     "iron-icon": "PolymerElements/iron-icon#~1.0.4",
     "iron-icons": "PolymerElements/iron-icons#~1.0.3",
     "iron-input": "polymerelements/iron-input#~1.0.5",
     "iron-list": "polymerelements/iron-list#~1.0.3",
     "iron-overlay-behavior": "polymerelements/iron-overlay-behavior#~1.0.5",
+    "iron-selector": "polymerelements/iron-selector#1.0.2",
     "paper-button": "polymerelements/paper-button#~1.0.6",
     "paper-input": "PolymerElements/paper-input#~1.0.12",
     "paper-toast": "polymerelements/paper-toast#~1.0.0",
     "polymer": "Polymer/polymer#^1.1.0",
-    "vaadin-grid": "0.9.0-beta2",
-    "components-demo-resources": "vaadin/components-demo-resources#master"
+    "vaadin-grid": "0.9.0-beta2"
   },
   "devDependencies": {
     "web-component-tester": "*",

diff --git a/demo/index.html b/demo/index.html
@@ -27,12 +27,6 @@ <h3>Opening and closing</h3>
 
     <code-example source>
       <button id="togglebutton">Toggle dropdown</button>
-      <style>
-        #dropdown {
-          /* Temporary style */
-          background: #eee;
-        }
-      </style>
       <vaadin-combo-box demo></vaadin-combo-box>
 
       <code demo-var="combobox">
@@ -51,6 +45,27 @@ <h3>Opening and closing</h3>
     </code-example>
   </section>
 
+  <section>
+    <h3>Selecting a value</h3>
+    <p>Selecting a value from the dropdown list or typing a value to the textfield
+    changes <code>vaadin-combo-box's</code> value property and fires a <code>value-changed</code> event.</p>
+    <p>Changing the value property explicitly also updates the visible fields.</p>
+
+    <code-example source>
+      <vaadin-combo-box demo></vaadin-combo-box>
+
+      <code demo-var="combobox">
+        var combobox = combobox || document.querySelector("vaadin-combo-box");
+        combobox.items = ['foo', 'bar', 'baz'];
+
+        combobox.value = 'bar';
+        combobox.addEventListener('value-changed', function() {
+          console.log("New value: " + combobox.value);
+        });
+      </code>
+    </code-example>
+  </section>
+
 
 
 

diff --git a/test/index.html b/test/index.html
@@ -16,7 +16,8 @@
       'toggling-dropdown.html',
       'toggling-dropdown.html?dom=shadow',
       'adaptive-overlay.html',
-      'adaptive-overlay.html?dom=shadow'
+      'adaptive-overlay.html?dom=shadow',
+      'selecting-items.html'
     ]);
   </script>
 </body>

diff --git a/test/selecting-items.html b/test/selecting-items.html
@@ -0,0 +1,64 @@
+<!doctype html>
+<html>
+
+<head>
+  <meta charset="UTF-8">
+  <title>vaadin-combo basic tests</title>
+  <script src="../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
+  <script src="../bower_components/web-component-tester/browser.js"></script>
+  <script src="../bower_components/test-fixture/test-fixture-mocha.js"></script>
+
+  <link rel="import" href="common.html">
+</head>
+
+<body>
+
+<test-fixture id="combobox">
+  <template>
+    <vaadin-combo-box></vaadin-combo-box>
+  </template>
+</test-fixture>
+
+
+<script>
+  describe('selecting a value', function() {
+    var combobox;
+    var input;
+    var selector;
+
+    beforeEach(function() {
+      combobox = fixture('combobox');
+      input = combobox.$$("input");
+      selector = combobox.$.selector;
+    });
+
+    it('should select by using the text input', function() {
+      input.bindValue = "foo";
+      expect(combobox.value).to.equal("foo");
+      expect(selector.selected).to.equal("foo");
+    });
+
+    it('should select by using the selector', function() {
+      selector.selected = "foo";
+      expect(combobox.value).to.equal("foo");
+      expect(input.bindValue).to.equal("foo");
+    });
+
+    it('should select by using JS api', function() {
+      combobox.value = "foo";
+      expect(selector.selected).to.equal("foo");
+      expect(input.bindValue).to.equal("foo");
+    });
+
+    it('should close the dropdown on selection', function() {
+      combobox.open();
+      combobox.value = "foo";
+      expect(combobox.opened).to.equal(false);
+    });
+
+  });
+</script>
+
+</body>
+
+</html>
diff --git a/vaadin-combo-box.html b/vaadin-combo-box.html
@@ -7,21 +7,32 @@
 <link rel='import' href='../iron-input/iron-input.html'>
 <link rel='import' href="../iron-icons/iron-icons.html">
 <link rel='import' href='../iron-icon/iron-icon.html'>
+<link rel='import' href='../iron-selector/iron-selector.html'>
 <link rel='import' href='vaadin-adaptive-overlay.html'>
 
 <dom-module id="vaadin-combo-box">
+  <style>
+    /* Temporary styles */
+    #selector div {
+      background: rgba(0, 0, 0, 0.2);
+    }
+    #selector div.iron-selected {
+      background: rgba(0, 0, 0, 0.4);
+    }
+  </style>
+
   <template>
     <paper-input-container on-tap='open'>
-      <input is="iron-input">
+      <input is="iron-input" bind-value={{value}}>
       <iron-icon icon="arrow-drop-down" suffix></iron-icon>
     </paper-input-container>
 
     <vaadin-adaptive-overlay id="overlay" opened={{opened}}>
-      <ul>
-        <li>Foo</li>
-        <li>Bar</li>
-        <li>Baz</li>
-      </ul>
+      <iron-selector id='selector' selected={{value}} attr-for-selected='val'>
+        <div val="foo">foo</div>
+        <div val="bar">bar</div>
+        <div val="baz">baz</div>
+      </iron-selector>
     </vaadin-adaptive-overlay>
   </template>
 </dom-module>
@@ -38,6 +49,15 @@
         type: Boolean,
         notify: true,
         value: false
+      },
+
+      /**
+       * The value for this element.
+       */
+      value: {
+        type: String,
+        notify: true,
+        observer: 'close'
       }
     },