fix(searchbar): clear controlled searchbar

[dextertanyj]

Problem

Support for controlled searchbars was introduced in #218. However, the clear button does not trigger the onChange function and only supports uncontrolled inputs.

Closes #446

Solution

Check if the searchbar is a controlled input by checking for the presence of onChange. If it is a controlled input, call onChange with the appropriate value.

Tests

• Includes new story for controlled searchbar input.

[netlify]

✅ Deploy Preview for objective-bell-0ffbfb canceled.

Name	Link
🔨 Latest commit	b7a710e
🔍 Latest deploy log	https://app.netlify.com/sites/objective-bell-0ffbfb/deploys/64c77d4c69c5d800085d01a9

[karrui]

FYI: @seaerchin

[seaerchin]

we pass onSearch only cos it's uncontrolled so idt this affects us! thx for letting me know sir @karrui

[seaerchin]

if this is controlled, why is it always firing with '' ah? just curious

[dextertanyj]

Since its controlled, we need to use onChange to clear the external state when the clear button is pressed so we send ''. For all other purposes, the onChange function is just passed to the Input component which will handle everything else.

[karrui]

Should we also use the useControllableState hook to convert all uncontrolled/controlled props passed into the component into a controlled component? Then we can handle the current value much better.

[karrui]

lgtm