fix(quantic): Clear icon not being displayed after selecting a suggestion in quantic searchbox

[SimonMilord]

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

Screen.Recording.2024-09-09.at.11.47.36.AM.mov

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:

Screen.Recording.2024-10-01.at.4.35.50.PM.mov

[github-actions]

Pull Request Report

PR Title

❌ Title should follow the conventional commit spec:
<type>(optional scope): <description>

Example: feat(headless): add result-list controller

Live demo links

• Storybook

• Playwright report

Bundle Size

File	Old (kb)	New (kb)	Change (%)
case-assist	236.3	236.3	0
commerce	339.1	339.1	0
search	411.5	411.5	0
insight	399.3	399.3	0
recommendation	248.5	248.5	0
ssr	405.5	405.5	0
ssr-commerce	351.4	351.4	0

SSR Progress

Use case	SSR (#)	CSR (#)	Progress (%)
search	39	44	89
recommendation	0	4	0
case-assist	0	6	0
insight	0	27	0
commerce	0	15	0

Detailed logs

search : buildInteractiveResult
search : buildInteractiveInstantResult
search : buildInteractiveRecentResult
search : buildInteractiveCitation
search : buildGeneratedAnswer
recommendation : missing SSR support
case-assist : missing SSR support
insight : missing SSR support
commerce : missing SSR support

[mmitiche]

The problem is not that icon is not rendered after selecting a query suggestion, the problem like you can see in the first video of the PR description is that the icon is not displayed on first render.

Like if you have a query in your search box than update the page, the search box will contain the query but not the icon.

I think a simple fix for that could be updating the getter isQueryEmpty to the following in the QuanticSearchBoxInput:

  get isQueryEmpty() {
    return !this.input?.value && !this.inputValue
  }

[mmitiche]

✅