fix(`SearchInput`): resolve composition event issue with CJK input methods in controlled inputs

[cheton]

https://trendmicro-frontend.github.io/tonic-ui-demo/react/pr-850/components/search-input

When the input value remains unchanged in controlled input, composition events (especially CJK input methods) may not work properly. To address this issue, update the input value internally before invoking onChangeProp.

Check out the screenshot and video below:

[codesandbox[bot]]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders
Open Preview

[codesandbox-ci[bot]]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[codecov[bot]]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 71.31%. Comparing base (9e2a424) to head (85ba99c).

Additional details and impacted files

```diff @@ Coverage Diff @@ ## v1 #850 +/- ## ========================================== - Coverage 71.32% 71.31% -0.01% ========================================== Files 374 374 Lines 6273 6271 -2 ========================================== - Hits 4474 4472 -2 Misses 1799 1799 ``` | [Flag](https://app.codecov.io/gh/trendmicro-frontend/tonic-ui/pull/850/flags?src=pr&el=flags&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=trendmicro-frontend) | Coverage Δ | | |---|---|---| | [react](https://app.codecov.io/gh/trendmicro-frontend/tonic-ui/pull/850/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=trendmicro-frontend) | `73.01% <100.00%> (-0.02%)` | :arrow_down: | | [react-hooks](https://app.codecov.io/gh/trendmicro-frontend/tonic-ui/pull/850/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=trendmicro-frontend) | `87.59% <ø> (ø)` | | | [react-lab](https://app.codecov.io/gh/trendmicro-frontend/tonic-ui/pull/850/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=trendmicro-frontend) | `14.04% <ø> (ø)` | | | [styled-system](https://app.codecov.io/gh/trendmicro-frontend/tonic-ui/pull/850/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=trendmicro-frontend) | `91.73% <ø> (ø)` | | | [theme](https://app.codecov.io/gh/trendmicro-frontend/tonic-ui/pull/850/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=trendmicro-frontend) | `100.00% <ø> (ø)` | | | [utils](https://app.codecov.io/gh/trendmicro-frontend/tonic-ui/pull/850/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=trendmicro-frontend) | `70.28% <ø> (ø)` | | Flags with carried forward coverage won't be shown. [Click here](https://docs.codecov.io/docs/carryforward-flags?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=trendmicro-frontend#carryforward-flags-in-the-pull-request-comment) to find out more.

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

[trendmicro-frontend-bot]

Tonic UI Demo

• 2024-05-12 08:41:24 +0000 The PR #850 (85ba99c43833ae0bf00a10d43916a1410f11c6c2) has been deployed to https://trendmicro-frontend.github.io/tonic-ui-demo/react/pr-850/