feat(quantic): added support to entering line breaks in expandable se…

…arch box (#3569) * added possibility to enter line breaks in expandable search box * added possibility to enter line breaks in expandable search box * unit test added * test improved * small refactor * Update packages/quantic/force-app/main/default/lwc/quanticSearchBoxInput/__tests__/quanticSearchBoxInput.test.js * Update packages/quantic/force-app/main/default/lwc/quanticSearchBoxInput/__tests__/quanticSearchBoxInput.test.js Co-authored-by: Etienne Rocheleau <[email protected]> * handleKeyValues removed * conflict fixed --------- Co-authored-by: Etienne Rocheleau <[email protected]>
coveo · Feb 5, 2024 · 60ccf6e · 60ccf6e
1 parent 3faed0d
commit 60ccf6e
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 12 deletions.
diff --git a/.../force-app/main/default/lwc/quanticSearchBoxInput/__tests__/quanticSearchBoxInput.test.js b/.../force-app/main/default/lwc/quanticSearchBoxInput/__tests__/quanticSearchBoxInput.test.js
@@ -353,6 +353,33 @@ describe('c-quantic-search-box-input', () => {
               functionsMocks.exampleHandleSubmitSearch
             ).toHaveBeenCalledTimes(1);
           });
+
+          it(`${
+            textareaValue ? 'should not' : 'should'
+          } dispatch a #quantic__submitsearch custom event when the shift key is pressed along with the enter key`, async () => {
+            const element = createTestComponent({
+              ...defaultOptions,
+              textarea: textareaValue,
+            });
+            setupEventListeners(element);
+            await flushPromises();
+
+            const input = element.shadowRoot.querySelector(
+              textareaValue
+                ? selectors.searchBoxTextArea
+                : selectors.searchBoxInput
+            );
+            expect(input).not.toBeNull();
+
+            await input.focus();
+            input.dispatchEvent(
+              new KeyboardEvent('keyup', {key: 'Enter', shiftKey: true})
+            );
+
+            expect(
+              functionsMocks.exampleHandleSubmitSearch
+            ).toHaveBeenCalledTimes(textareaValue ? 0 : 1);
+          });
         });
       });
     });

diff --git a/packages/quantic/force-app/main/default/lwc/quanticSearchBoxInput/quanticSearchBoxInput.js b/packages/quantic/force-app/main/default/lwc/quanticSearchBoxInput/quanticSearchBoxInput.js
@@ -182,8 +182,9 @@ export default class QuanticSearchBoxInput extends LightningElement {
     this.dispatchEvent(selectSuggestionEvent);
   }
 
-  handleEnter() {
-    if (!this.ignoreNextEnterKeyPress) {
+  handleEnter(event) {
+    const isLineBreak = this.textarea && event.shiftKey;
+    if (!(this.ignoreNextEnterKeyPress || isLineBreak)) {
       const selectedSuggestion =
         this.suggestionListElement?.getCurrentSelectedValue();
       if (this.areSuggestionsOpen && selectedSuggestion) {
@@ -199,11 +200,6 @@ export default class QuanticSearchBoxInput extends LightningElement {
     this.sendInputValueChangeEvent(this.input.value, false);
   }
 
-  handleKeyValues() {
-    // Reset selection set to true for key pressed other than ARROW keys and ENTER.
-    this.sendInputValueChangeEvent(this.input.value, true);
-  }
-
   onSubmit(event) {
     event.stopPropagation();
     this.sendInputValueChangeEvent(this.input.value, false);
@@ -223,7 +219,7 @@ export default class QuanticSearchBoxInput extends LightningElement {
    * @param {KeyboardEvent} event
    */
   onKeydown(event) {
-    if (event.key === keys.ENTER) {
+    if (event.key === keys.ENTER && !event.shiftKey) {
       event.preventDefault();
     }
   }
@@ -234,7 +230,7 @@ export default class QuanticSearchBoxInput extends LightningElement {
   onKeyup(event) {
     switch (event.key) {
       case keys.ENTER:
-        this.handleEnter();
+        this.handleEnter(event);
         break;
       case keys.ARROWUP:
         this.suggestionListElement?.selectionUp();
@@ -243,7 +239,8 @@ export default class QuanticSearchBoxInput extends LightningElement {
         this.suggestionListElement?.selectionDown();
         break;
       default:
-        this.handleKeyValues();
+        // Reset selection set to true for key pressed other than ARROW keys and ENTER.
+        this.sendInputValueChangeEvent(this.input.value, true);
     }
     this.ignoreNextEnterKeyPress = false;
   }
@@ -259,26 +256,28 @@ export default class QuanticSearchBoxInput extends LightningElement {
   }
 
   onTextAreaInput() {
-    this.handleValueChange();
+    this.sendInputValueChangeEvent(this.input.value, true);
     this.adjustTextAreaHeight();
   }
 
   adjustTextAreaHeight() {
     if (!this.textarea) {
       return;
     }
-    this.input.value = this.input.value.replace(/\n/g, '');
     this.input.style.height = '';
     this.input.style.whiteSpace = 'pre-wrap';
     this.input.style.height = this.input.scrollHeight + 'px';
+    this.input.style.overflow = 'auto';
   }
 
   collapseTextArea() {
     if (!this.textarea) {
       return;
     }
     this.input.style.height = '';
+    this.input.scrollTop = 0;
     this.input.style.whiteSpace = 'nowrap';
+    this.input.style.overflow = 'hidden';
   }
 
   clearInput() {
@@ -304,6 +303,7 @@ export default class QuanticSearchBoxInput extends LightningElement {
 
   handleHighlightChange(event) {
     this.input.value = event.detail?.rawValue;
+    this.adjustTextAreaHeight();
   }
 
   handleSuggestionSelection(event) {