fix: searchbox cta warnings in form

[Ninfa-Jeon]

Done

The SearchBox component and consequently the MultiSelect component were throwing warnings when rendered within a formik form. This was due to the fact that the search button within SearchBox was being rendered without an explicit type="submit" prop.

• Resolved the above by setting type="submit" by default on SearchBox search button
• Exposed a searchButtonType prop in case the button type needs to change
• Exposed dropdownClassName, inputClassName and footerClassName props to fine tune MultiSelect as needed. This is because the dropdown is being rendered within a portal, making global override the only other solution.

QA

Pinging @canonical/react-library-maintainers for a review.

Storybook

To see rendered examples of all react-components, run:

yarn start

QA in your project

from react-components run:

yarn build
npm pack

Install the resulting tarball in your project with:

yarn add <path-to-tarball>

QA steps

• View the storybook story to verify that the custom classname props work
• Change the FormikField to render multiselect and try clicking the search button on it. The following error should not appear in console:

Warning: You submitted a Formik form using a button with an unspecified type attribute. Most browsers default button elements to type="submit". If this is not a submit button, please add type="button"

[huwshimi]

A few small changes here.

[huwshimi]

Thanks for the updates!

[github-actions]

🎉 This PR is included in version 4.5.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀