Trigger changeQuery event wanneer de gebruiker zoektermen ingeeft (#…

…154) (#155)

demo/vl-select.html

@@ -105,6 +105,18 @@
                     <option value="Gent">Gent</option>
                 </optgroup>
             </select>
+
+            <div>
+                Je hebt gezocht naar: <span id="search-value">/</span>
+            </div>
+
+            <script type="text/javascript">
+                const element = document.getElementById('select-searchable');
+                element.addEventListener('changeQuery', ({detail: {value}}) => {
+                    const searchValueElement = document.getElementById('search-value');
+                    searchValueElement.textContent = value;
+                });
+            </script>
         </vl-demo>
 
         <vl-demo data-vl-title="Select zonder search">
@@ -228,7 +240,6 @@
             <div is="vl-action-group" slot="actions">
                 <button id="dress-button" is="vl-button" onclick="document.getElementById('select-dress-undress-methode').dress()" type="button">Dress</button>
                 <button id="undress-button" is="vl-button" onclick="document.getElementById('select-dress-undress-methode').undress()" type="button">Undress</button>
-                </div>
             </div>
         </vl-demo>
 
@@ -305,4 +316,4 @@
     </vl-demo-page>
 </body>
 
-</html>
+</html>

lib/select.js

@@ -820,6 +820,10 @@ global.select = factory();
                     i = this.store.getItemsFilteredByActive(),
                     n = this._canAddItem(i, t);
 
+                v.triggerEvent(this.passedElement, "changeQuery", {
+                  value: t
+                })
+
                 if (this.isTextElement) {
                   var s = this.dropdown.classList.contains(this.config.classNames.activeState);
 

package.json

@@ -54,6 +54,6 @@
     "vl-ui-form-grid": "^3.0.8",
     "vl-ui-modal": "^4.0.3",
     "vl-ui-upload": "^3.4.0",
-    "vl-ui-util": "^5.3.7"
+    "vl-ui-util": "^5.3.11"
   }
 }

test/e2e/pages/vl-select.page.js

@@ -67,6 +67,10 @@ class VlSelectPage extends Page {
     return this._getSelect('#select-set-get-methode');
   }
 
+  async getSearchValue() {
+    return (await this.driver.findElement(By.css('#search-value'))).getText();
+  }
+
   async activeerDynamischeData() {
     return (await this.driver.findElement(By.css('#activate-data-button'))).click();
   }

test/e2e/select.test.js

@@ -166,4 +166,10 @@ describe('vl-select', async () => {
     await vlSelectPage.remove();
     await assert.eventually.isEmpty(select.getSelectedValue());
   });
+
+  it('als gebruiker kan ik een terugkoppeling te zien krijgen als ik zoek', async () => {
+    const select = await vlSelectPage.getSearchableSelect();
+    await select.search('foobar');
+    await assert.eventually.equal(vlSelectPage.getSearchValue(), 'foobar');
+  });
 });