From 45e2e62b785ef3526aaa6ff7fefd570e2d9cd51a Mon Sep 17 00:00:00 2001 From: Daniel Faucette Date: Fri, 8 Oct 2021 16:35:37 -0400 Subject: [PATCH 01/10] feat: added custom event for clear search --- elements/pfe-autocomplete/src/pfe-autocomplete.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/elements/pfe-autocomplete/src/pfe-autocomplete.js b/elements/pfe-autocomplete/src/pfe-autocomplete.js index 2699ee8ca0..f173155b0c 100644 --- a/elements/pfe-autocomplete/src/pfe-autocomplete.js +++ b/elements/pfe-autocomplete/src/pfe-autocomplete.js @@ -69,6 +69,7 @@ class PfeAutocomplete extends PFElement { search: `${this.tag}:search-event`, select: `${this.tag}:option-selected`, optionsShown: `${this.tag}:options-shown`, + optionCleared: `${this.tag}:option-cleared`, slotchange: `slotchange`, }; } @@ -129,6 +130,7 @@ class PfeAutocomplete extends PFElement { this._input.addEventListener("input", this._inputChanged.bind(this)); this._input.addEventListener("blur", this._closeDroplist.bind(this)); + this._input.addEventListener("search", this._searchCleared.bind(this)); this._input.setAttribute("role", "combobox"); @@ -254,6 +256,7 @@ class PfeAutocomplete extends PFElement { this._searchBtn.setAttribute("disabled", ""); this._searchBtnTextual.setAttribute("disabled", ""); this._input.focus(); + this._searchCleared(); } _search() { @@ -266,6 +269,14 @@ class PfeAutocomplete extends PFElement { this._input.setAttribute("aria-expanded", "false"); } + _searchCleared() { + this.emitEvent(PfeAutocomplete.events.optionsShown, { + bubbles: true, + composed: true, + detail: { searchValue: searchQuery } + }); + } + _openDroplist() { this.activeIndex = null; this._dropdown.open = true; @@ -412,6 +423,7 @@ class PfeAutocomplete extends PFElement { * pfe-autocomplete:option-selected | Fires when an option is selected. event.details.optionValue contains the selected value. */ + class PfeSearchDroplist extends PFElement { static get tag() { return "pfe-search-droplist"; From f38b551ec70f08fcef77c001f6b64645797fa07c Mon Sep 17 00:00:00 2001 From: Daniel Faucette Date: Fri, 8 Oct 2021 17:07:03 -0400 Subject: [PATCH 02/10] added aria attribute to search button --- elements/pfe-autocomplete/src/pfe-autocomplete.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/elements/pfe-autocomplete/src/pfe-autocomplete.html b/elements/pfe-autocomplete/src/pfe-autocomplete.html index 7bfc05d7d0..e5f8331701 100644 --- a/elements/pfe-autocomplete/src/pfe-autocomplete.html +++ b/elements/pfe-autocomplete/src/pfe-autocomplete.html @@ -42,5 +42,5 @@ \ No newline at end of file From 17e06e5db64eddb14b9c2c608341beb2d8bcb52d Mon Sep 17 00:00:00 2001 From: Daniel Faucette Date: Fri, 8 Oct 2021 17:13:15 -0400 Subject: [PATCH 03/10] remove event listener when disconnected --- elements/pfe-autocomplete/src/pfe-autocomplete.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/elements/pfe-autocomplete/src/pfe-autocomplete.js b/elements/pfe-autocomplete/src/pfe-autocomplete.js index f173155b0c..8fd33ce1b7 100644 --- a/elements/pfe-autocomplete/src/pfe-autocomplete.js +++ b/elements/pfe-autocomplete/src/pfe-autocomplete.js @@ -1,4 +1,5 @@ import PFElement from "../../pfelement/dist/pfelement.js"; +// import PfeSearchDroplist from "./pfe-search-droplist.js"; import "../../pfe-button/dist/pfe-button.js"; const KEYCODE = { @@ -166,6 +167,7 @@ class PfeAutocomplete extends PFElement { this._clearBtn.removeEventListener("click", this._clear); this._searchBtn.removeEventListener("click", this._search); this._searchBtnTextual.removeEventListener("click", this._search); + this._input.removeEventListener("search", this._searchCleared.bind(this)); } _initValueChanged(oldVal, newVal) { From 9271a232da145449929fdcbf0d5d26997c421c66 Mon Sep 17 00:00:00 2001 From: Daniel Faucette Date: Tue, 12 Oct 2021 19:02:15 -0400 Subject: [PATCH 04/10] giving up on moving dropdown to its own module --- elements/pfe-autocomplete/src/pfe-autocomplete.js | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/elements/pfe-autocomplete/src/pfe-autocomplete.js b/elements/pfe-autocomplete/src/pfe-autocomplete.js index 8fd33ce1b7..b27f2c0a3a 100644 --- a/elements/pfe-autocomplete/src/pfe-autocomplete.js +++ b/elements/pfe-autocomplete/src/pfe-autocomplete.js @@ -1,5 +1,4 @@ import PFElement from "../../pfelement/dist/pfelement.js"; -// import PfeSearchDroplist from "./pfe-search-droplist.js"; import "../../pfe-button/dist/pfe-button.js"; const KEYCODE = { @@ -149,6 +148,8 @@ class PfeAutocomplete extends PFElement { this._input.setAttribute("autocorrect", "off"); this._input.setAttribute("autocapitalize", "off"); this._input.setAttribute("spellcheck", "false"); + + this._input.setAttribute("style", `input[type=search]::-ms-clear { display: none; width : 0; height: 0; }input[type = search]:: -ms - reveal { display: none; width: 0; height: 0; }" nput[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration { display: none; }`) } disconnectedCallback() { @@ -272,11 +273,13 @@ class PfeAutocomplete extends PFElement { } _searchCleared() { - this.emitEvent(PfeAutocomplete.events.optionsShown, { - bubbles: true, - composed: true, - detail: { searchValue: searchQuery } - }); + if(this._input.value == '') { + this.emitEvent(PfeAutocomplete.events.optionsShown, { + bubbles: true, + composed: true, + detail: { searchValue: searchQuery } + }); + } } _openDroplist() { From f0f4ad0d5c80bcc83bd2a0f185b4658be2863fdb Mon Sep 17 00:00:00 2001 From: Daniel Faucette Date: Tue, 26 Oct 2021 16:53:55 -0400 Subject: [PATCH 05/10] added a test for cleared event --- .../pfe-autocomplete/src/pfe-autocomplete.js | 9 ++++++--- .../test/pfe-autocomplete_test.js | 18 ++++++++++++++++++ 2 files changed, 24 insertions(+), 3 deletions(-) diff --git a/elements/pfe-autocomplete/src/pfe-autocomplete.js b/elements/pfe-autocomplete/src/pfe-autocomplete.js index b27f2c0a3a..bbfc717974 100644 --- a/elements/pfe-autocomplete/src/pfe-autocomplete.js +++ b/elements/pfe-autocomplete/src/pfe-autocomplete.js @@ -149,7 +149,10 @@ class PfeAutocomplete extends PFElement { this._input.setAttribute("autocapitalize", "off"); this._input.setAttribute("spellcheck", "false"); - this._input.setAttribute("style", `input[type=search]::-ms-clear { display: none; width : 0; height: 0; }input[type = search]:: -ms - reveal { display: none; width: 0; height: 0; }" nput[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration { display: none; }`) + this._input.setAttribute( + "style", + `input[type=search]::-ms-clear { display: none; width : 0; height: 0; }input[type = search]:: -ms - reveal { display: none; width: 0; height: 0; }" nput[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration { display: none; }` + ); } disconnectedCallback() { @@ -273,11 +276,11 @@ class PfeAutocomplete extends PFElement { } _searchCleared() { - if(this._input.value == '') { + if (this._input.value == "") { this.emitEvent(PfeAutocomplete.events.optionsShown, { bubbles: true, composed: true, - detail: { searchValue: searchQuery } + detail: { searchValue: searchQuery }, }); } } diff --git a/elements/pfe-autocomplete/test/pfe-autocomplete_test.js b/elements/pfe-autocomplete/test/pfe-autocomplete_test.js index d58ad101ac..29ede34721 100644 --- a/elements/pfe-autocomplete/test/pfe-autocomplete_test.js +++ b/elements/pfe-autocomplete/test/pfe-autocomplete_test.js @@ -177,6 +177,24 @@ describe('', () => { }); }); + it('should fire a pfe-autocomplete:option-cleared event when the input is cleared', done => { + flush(() => { + const items = ['option 1', 'option 2']; + + // autocompleteElem.autocompleteRequest = function (params, callback) { + // const regx = new RegExp("\^" + params.query, "i"); + // callback(items.filter(function (item) { + // return regx.test(item); + // })); + // }; + + autocompleteElem.addEventListener("pfe-autocomplete:option-cleared", function (event) { + assert.isTrue(true); // the event listener was called + done(); + }); + }); + }); + it('should set selected-value attribute after user click on an option', done => { flush(() => { droplistElem.data = ['option 1', 'option 2']; From 9b4c6b4958f078ad8e14cd00224d397ebc5cf7db Mon Sep 17 00:00:00 2001 From: Daniel Faucette Date: Tue, 26 Oct 2021 17:14:56 -0400 Subject: [PATCH 06/10] made button cover default browser clear icon --- elements/pfe-autocomplete/src/pfe-autocomplete.scss | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/elements/pfe-autocomplete/src/pfe-autocomplete.scss b/elements/pfe-autocomplete/src/pfe-autocomplete.scss index aa77377120..92e3cda1a8 100644 --- a/elements/pfe-autocomplete/src/pfe-autocomplete.scss +++ b/elements/pfe-autocomplete/src/pfe-autocomplete.scss @@ -28,7 +28,8 @@ $LOCAL-VARIABLES: ( } button.clear-search { - right: 10px; + width: 50px; + right: 0px; } } @@ -113,7 +114,9 @@ button { color: pfe-var(ui-base); } svg { - width: 12px; + width: 14px; + position: relative; + top: 2px; stroke: pfe-var(surface--border); } &:hover svg, From 26eb5f1536ef1acbea49c3f84e65eb443e1e5607 Mon Sep 17 00:00:00 2001 From: Daniel Faucette Date: Tue, 26 Oct 2021 17:19:22 -0400 Subject: [PATCH 07/10] removed unneeded padding and made the button overlap the default clear icon --- elements/pfe-autocomplete/src/pfe-autocomplete.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/elements/pfe-autocomplete/src/pfe-autocomplete.scss b/elements/pfe-autocomplete/src/pfe-autocomplete.scss index 92e3cda1a8..9505edaae8 100644 --- a/elements/pfe-autocomplete/src/pfe-autocomplete.scss +++ b/elements/pfe-autocomplete/src/pfe-autocomplete.scss @@ -28,7 +28,7 @@ $LOCAL-VARIABLES: ( } button.clear-search { - width: 50px; + width: 40px; right: 0px; } } @@ -51,7 +51,7 @@ $LOCAL-VARIABLES: ( flex: 1; box-shadow: pfe-local(BoxShadow) !important; padding-left: 10px; - padding-right: 30px; + padding-right: 0; border-radius: pfe-var(ui--border-radius); background-color: pfe-local(BackgroundColor); border: pfe-local(Border); From 490ad8fb5ddccf7135884360cc15475140dc7198 Mon Sep 17 00:00:00 2001 From: Daniel Faucette Date: Tue, 26 Oct 2021 18:43:12 -0400 Subject: [PATCH 08/10] added some fixes to get tests to pass --- elements/pfe-autocomplete/src/pfe-autocomplete.js | 10 +++++----- .../pfe-autocomplete/test/pfe-autocomplete_test.js | 13 +++++++------ 2 files changed, 12 insertions(+), 11 deletions(-) diff --git a/elements/pfe-autocomplete/src/pfe-autocomplete.js b/elements/pfe-autocomplete/src/pfe-autocomplete.js index bbfc717974..2ef9e3a490 100644 --- a/elements/pfe-autocomplete/src/pfe-autocomplete.js +++ b/elements/pfe-autocomplete/src/pfe-autocomplete.js @@ -262,7 +262,7 @@ class PfeAutocomplete extends PFElement { this._searchBtn.setAttribute("disabled", ""); this._searchBtnTextual.setAttribute("disabled", ""); this._input.focus(); - this._searchCleared(); + this._searchCleared(this._input.value); } _search() { @@ -275,12 +275,12 @@ class PfeAutocomplete extends PFElement { this._input.setAttribute("aria-expanded", "false"); } - _searchCleared() { - if (this._input.value == "") { - this.emitEvent(PfeAutocomplete.events.optionsShown, { + _searchCleared(searchQuery = '') { + if (this._input.value === "") { + this.emitEvent(PfeAutocomplete.events.optionCleared, { bubbles: true, composed: true, - detail: { searchValue: searchQuery }, + detail: { searchValue: searchQuery}, }); } } diff --git a/elements/pfe-autocomplete/test/pfe-autocomplete_test.js b/elements/pfe-autocomplete/test/pfe-autocomplete_test.js index 29ede34721..0023dbc535 100644 --- a/elements/pfe-autocomplete/test/pfe-autocomplete_test.js +++ b/elements/pfe-autocomplete/test/pfe-autocomplete_test.js @@ -181,17 +181,18 @@ describe('', () => { flush(() => { const items = ['option 1', 'option 2']; - // autocompleteElem.autocompleteRequest = function (params, callback) { - // const regx = new RegExp("\^" + params.query, "i"); - // callback(items.filter(function (item) { - // return regx.test(item); - // })); - // }; + autocompleteElem.autocompleteRequest = function (params, callback) { + const regx = new RegExp("\^" + params.query, "i"); + callback(items.filter(function (item) { + return regx.test(item); + })); + }; autocompleteElem.addEventListener("pfe-autocomplete:option-cleared", function (event) { assert.isTrue(true); // the event listener was called done(); }); + autocompleteElem._clear(); }); }); From 2bbb568d982deb7ea5f6032eff0f9d26ccefb77d Mon Sep 17 00:00:00 2001 From: Daniel Faucette Date: Thu, 28 Oct 2021 10:30:51 -0400 Subject: [PATCH 09/10] fixes variants --- elements/pfe-autocomplete/src/pfe-autocomplete.scss | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/elements/pfe-autocomplete/src/pfe-autocomplete.scss b/elements/pfe-autocomplete/src/pfe-autocomplete.scss index 9505edaae8..71cc7933e9 100644 --- a/elements/pfe-autocomplete/src/pfe-autocomplete.scss +++ b/elements/pfe-autocomplete/src/pfe-autocomplete.scss @@ -132,12 +132,18 @@ button { } &.search-button { + margin-top: 1px; + margin-bottom: 1px; right: 1px; width: 30px; - + background-color: pfe-var(surface--lightest); svg { fill: pfe-var(link); - width: 16px; + // width: 16px; + width: 18px; + position: relative; + top: 2px; + stroke: pfe-var(surface--border); } &:hover svg, From 7f53f1e1024f073a20b355bb12796e945dde6f87 Mon Sep 17 00:00:00 2001 From: Kyle Buchanan Date: Fri, 29 Oct 2021 10:06:36 -0400 Subject: [PATCH 10/10] removing search event listener and firing option-cleared event on clear button click --- elements/pfe-autocomplete/demo/index.html | 6 +++++- elements/pfe-autocomplete/docs/index.md | 9 +++++++++ .../pfe-autocomplete/src/pfe-autocomplete.js | 18 +++++------------- 3 files changed, 19 insertions(+), 14 deletions(-) diff --git a/elements/pfe-autocomplete/demo/index.html b/elements/pfe-autocomplete/demo/index.html index 7a9aa93f08..9e27e22c57 100644 --- a/elements/pfe-autocomplete/demo/index.html +++ b/elements/pfe-autocomplete/demo/index.html @@ -25,7 +25,7 @@ - + + diff --git a/elements/pfe-autocomplete/docs/index.md b/elements/pfe-autocomplete/docs/index.md index a6d8e48048..7b2d8336eb 100644 --- a/elements/pfe-autocomplete/docs/index.md +++ b/elements/pfe-autocomplete/docs/index.md @@ -145,6 +145,15 @@ detail: { optionValue: String } ``` + +### pfe-autocomplete:option-cleared +Fires when a user clears the input field using the clear button. + +```javascript +detail: { + searchValue: "" +} +``` ::: ::: section diff --git a/elements/pfe-autocomplete/src/pfe-autocomplete.js b/elements/pfe-autocomplete/src/pfe-autocomplete.js index 2ef9e3a490..4a7fc7e167 100644 --- a/elements/pfe-autocomplete/src/pfe-autocomplete.js +++ b/elements/pfe-autocomplete/src/pfe-autocomplete.js @@ -130,7 +130,6 @@ class PfeAutocomplete extends PFElement { this._input.addEventListener("input", this._inputChanged.bind(this)); this._input.addEventListener("blur", this._closeDroplist.bind(this)); - this._input.addEventListener("search", this._searchCleared.bind(this)); this._input.setAttribute("role", "combobox"); @@ -171,7 +170,6 @@ class PfeAutocomplete extends PFElement { this._clearBtn.removeEventListener("click", this._clear); this._searchBtn.removeEventListener("click", this._search); this._searchBtnTextual.removeEventListener("click", this._search); - this._input.removeEventListener("search", this._searchCleared.bind(this)); } _initValueChanged(oldVal, newVal) { @@ -262,7 +260,11 @@ class PfeAutocomplete extends PFElement { this._searchBtn.setAttribute("disabled", ""); this._searchBtnTextual.setAttribute("disabled", ""); this._input.focus(); - this._searchCleared(this._input.value); + this.emitEvent(PfeAutocomplete.events.optionCleared, { + bubbles: true, + composed: true, + detail: { searchValue: "" }, + }); } _search() { @@ -275,16 +277,6 @@ class PfeAutocomplete extends PFElement { this._input.setAttribute("aria-expanded", "false"); } - _searchCleared(searchQuery = '') { - if (this._input.value === "") { - this.emitEvent(PfeAutocomplete.events.optionCleared, { - bubbles: true, - composed: true, - detail: { searchValue: searchQuery}, - }); - } - } - _openDroplist() { this.activeIndex = null; this._dropdown.open = true;