Failed to execute template. Cause: [Access denied when checking [script] access to [xwiki:Collaboratory.UX.HbpSkin.WebHome] for user [xwiki:XWiki.Admin]]. Click on this message for details.

CLB Search Component - HBP Wiki

IAM21 instance, do not create collab nor modify a team, your changes will be lost


Changes for page CLB Search Component

Last modified by bougault on 2023/01/17 11:42

From version 7.21
edited by bougault
on 2023/01/13 14:33
Change comment: There is no comment for this version
To version 7.27
edited by bougault
on 2023/01/13 14:39
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -20,10 +20,13 @@
20 20   return template;
21 21   }
22 22  
23 -
24 24   get styles() {
25 - return ``;
24 + return '';
26 26   }
26 +
27 + get html() {
28 + return '';
29 + }
27 27   $(selector) {
28 28   return this.shadowRoot.querySelector(selector);
29 29   }
... ... @@ -45,15 +45,19 @@
45 45   connectedCallback() {
46 46   super.connectedCallback();
47 47   this.render();
51 + const searchInput = this.$('input[type="text"]');
48 48   this.$('#search').addEventListener('click', this.handleSearch);
49 49   this.$('#prev').addEventListener('click', this.handlePrevPage);
50 - this.$('#next').addEventListener('click', this.handleNextPage;
54 + this.$('#next').addEventListener('click', this.handleNextPage);
55 + searchInput.addEventListener('keypress', this.handleKeyPress);
56 + searchInput.focus();
51 51   }
52 52  
53 53   disconnectedCallback() {
54 - this.$('#search').removeEventListener('click', this.handleSearch;
60 + this.$('#search').removeEventListener('click', this.handleSearch);
55 55   this.$('#prev').removeEventListener('click', this.handlePrevPage);
56 56   this.$('#next').removeEventListener('click', this.handleNextPage);
63 + this.$('input[type="text"]').addEventListener('keypress', this.handleKeyPress);
57 57   }
58 58  
59 59   get styles() {
... ... @@ -81,6 +81,11 @@
81 81   .then(this.renderResults);
82 82   }
83 83  
91 + handleKeyPress = (e) => {
92 + if(e.code === 'Enter') {
93 + this.handleSearch();
94 + }
95 + }
84 84  
85 85   get html() {
86 86   return `