Repository: medly/medly-components (ts)

Issue:
SearchBox: clear/close icon not hiding when we manually clear the state value.
### Describe the bug
The searchBox clear/close icon is not hiding when we manually clear the state value. 

### To Reproduce
Provide step-by-step instructions to reproduce the bug:

1. Go to SearchBox
2. add state value for search box;
3. clear the value based on some condition
4. You can check the clear/close icon is not going away.

### Expected behavior
the clear/close icon should show/hide based on state value. 

### Screenshots
If applicable, provide screenshots to explain the bug.

### Package versions
 - @medly-components/core : 6.27.0



Pull request:
fix(core): searchBox: clear/close icon not hiding when we manually clear the state value
affects: @medly-components/core

ISSUES CLOSED: #730

# PR Checklist

### Type of change
<!-- Please check the one that applies to this PR using "x". -->

- [x] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- x ] Code style update (formatting, local variables)
- [ ] Refactoring (no functional changes and API changes)
- [ ] Build changes
- [ ] CI changes
- [ ] Document content changes
- [ ] Performance improvement
- [ ] Add missing tests
- [ ] Others (please describe)


## How has this been tested?
(Replace This Text: Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration.)

[ ] Test A

[ ] Test B


## Fixes #730 

## Does this PR introduce a breaking change?

- [ ] Yes
- [x] No

**Note:** (Replace This Text: If this PR contains a breaking change please describe the impact and migration path for existing application.)


## Additional context
(Replace This Text: Please describe any other related information or add screenshots of the PR.)


## Checklist
<!-- Please check the one that applies to this PR using "x". -->

- [x] My code follows the style guidelines of this project

- [x] I have performed a self-review of my own code

- [ ] I have commented my code, particularly in hard-to-understand areas

- [ ] I have made corresponding changes to the documentation

- [ ] My changes generate no new warnings

- [ ] I have added tests that prove my fix is effective or that my feature works

- [ ] New and existing unit tests pass locally with my changes

- [ ] Any dependent changes have been merged and published in downstream modules


Patch:
diff --git a/packages/core/src/components/SearchBox/SearchBox.tsx b/packages/core/src/components/SearchBox/SearchBox.tsx
index 838b9fb0..c06d4b99 100644
--- a/packages/core/src/components/SearchBox/SearchBox.tsx
+++ b/packages/core/src/components/SearchBox/SearchBox.tsx
@@ -29,6 +29,7 @@ const Component: FC<SearchBoxProps> = memo(
             maxWidth,
             isLoading,
             loader: customLoader,
+            value,
             ...restProps
         } = props;
         const wrapperRef = useRef<any>(null),
@@ -39,7 +40,7 @@ const Component: FC<SearchBoxProps> = memo(
             [areOptionsVisible, setOptionsVisibilityState] = useState(false),
             [options, setOptions] = useState<Option[]>(defaultOptions || []),
             [isCustomSearchActive, setIsCustomSearchActive] = useState(false),
-            [showCloseIcon, setShowCloseIcon] = useState(!!restProps?.value?.toString().length),
+            [showCloseIcon, setShowCloseIcon] = useState(!!value?.toString().length),
             isEnterKeyPress = useKeyPress('Enter', true, optionsRef);
 
         useEffect(() => {
@@ -129,6 +130,10 @@ const Component: FC<SearchBoxProps> = memo(
             }
         }, [isEnterKeyPress]);
 
+        useEffect(() => {
+            setShowCloseIcon(!!value?.toString().length);
+        }, [value]);
+
         const hasCustomSearchFilter = !!customSearchFilter;
 
         return (
@@ -148,6 +153,7 @@ const Component: FC<SearchBoxProps> = memo(
                     ref={inputRef}
                     onFocus={handleFocus}
                     onBlur={handleBlur}
+                    value={value}
                     {...restProps}
                 />
                 {showCloseIcon && (


Test patch:
diff --git a/packages/core/src/components/SearchBox/__snapshots__/SearchBox.test.tsx.snap b/packages/core/src/components/SearchBox/__snapshots__/SearchBox.test.tsx.snap
index ce6320cb..93354f79 100644
--- a/packages/core/src/components/SearchBox/__snapshots__/SearchBox.test.tsx.snap
+++ b/packages/core/src/components/SearchBox/__snapshots__/SearchBox.test.tsx.snap
@@ -374,6 +374,7 @@ exports[`SearchBox options should render options when user search option specifi
     <input
       class="c1"
       placeholder="search"
+      value=""
     />
     <span
       class="c2"
@@ -652,6 +653,7 @@ exports[`SearchBox should render properly with "M" size 1`] = `
     <input
       class="c1"
       placeholder="Search"
+      value=""
     />
     <span
       class="c2 c3"
@@ -887,6 +889,7 @@ exports[`SearchBox should render properly with "S" size 1`] = `
     <input
       class="c1"
       placeholder="Search"
+      value=""
     />
     <span
       class="c2 c3"