From 80e6ba185c6d9572faf66299bc9edc0e1e433b37 Mon Sep 17 00:00:00 2001 From: Simon Milord Date: Thu, 3 Oct 2024 16:47:57 -0400 Subject: [PATCH] fix(quantic): Clear icon not being displayed after selecting a suggestion in quantic searchbox (#4481) [SFINT-5711](https://coveord.atlassian.net/browse/SFINT-5711) ### ISSUE: **Description:** The clear input button is not being displayed on first render when the query is not empty after selecting a suggestion/recent query on first render https://github.com/user-attachments/assets/633ddd45-f993-454c-b571-42c8b8e55b34 ### SOLUTION PROPOSED: Modified the `isQueryEmpty` getter to add the `&& !this.inputValue;` to the check. This makes the `isQueryEmpty` getter evaluate properly and therefore display the clear icon. ### DEMO: https://github.com/user-attachments/assets/a7b878c4-aaca-47ee-b3b7-3cebb07277ee [SFINT-5711]: https://coveord.atlassian.net/browse/SFINT-5711?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ --- .../__tests__/quanticSearchBoxInput.test.js | 16 ++++++++++++++++ .../quanticSearchBoxInput.js | 2 +- 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/packages/quantic/force-app/main/default/lwc/quanticSearchBoxInput/__tests__/quanticSearchBoxInput.test.js b/packages/quantic/force-app/main/default/lwc/quanticSearchBoxInput/__tests__/quanticSearchBoxInput.test.js index dfe2fa2867d..be7c2c4d74d 100644 --- a/packages/quantic/force-app/main/default/lwc/quanticSearchBoxInput/__tests__/quanticSearchBoxInput.test.js +++ b/packages/quantic/force-app/main/default/lwc/quanticSearchBoxInput/__tests__/quanticSearchBoxInput.test.js @@ -802,6 +802,22 @@ describe('c-quantic-search-box-input', () => { expect(input.style.height).toEqual(expectedCollapsedInputHeight); }); }); + + describe('when the component renders with a value in the input', () => { + it('should display the clear icon', async () => { + const element = createTestComponent({ + ...defaultOptions, + inputValue: mockInputValue, + textarea: textareaValue, + }); + await flushPromises(); + + const clearIcon = element.shadowRoot.querySelector( + selectors.searchBoxClearIcon + ); + expect(clearIcon).not.toBeNull(); + }); + }); }); }); }); diff --git a/packages/quantic/force-app/main/default/lwc/quanticSearchBoxInput/quanticSearchBoxInput.js b/packages/quantic/force-app/main/default/lwc/quanticSearchBoxInput/quanticSearchBoxInput.js index 59263c111ee..9225625de64 100644 --- a/packages/quantic/force-app/main/default/lwc/quanticSearchBoxInput/quanticSearchBoxInput.js +++ b/packages/quantic/force-app/main/default/lwc/quanticSearchBoxInput/quanticSearchBoxInput.js @@ -348,7 +348,7 @@ export default class QuanticSearchBoxInput extends LightningElement { } get isQueryEmpty() { - return !this.input?.value?.length; + return !this.input?.value && !this.inputValue; } /**