fix: Fixes to the startIcon feature on TextField

[gnapse]

Short description

While attempting to look into adding a new feature to the TextField¹, I noticed a couple of issues with the text field startIcon:

1. The "click to focus" functionality was still not entirely accurate if one managed to click on the thin padding around the icon. This PR fixes it by capturing the click event on the input element wrapper that covers the entire area inside the borders.
2. The startIcon feature was tailored only for the default text field variant. When the text field was set in bordered mode, the icon placement does not look good.

PR Checklist

• Added tests for bugs / new features
• Updated docs (storybooks, readme)
• Executed npm run validate and made sure no errors / warnings were shown
• Described changes in CHANGELOG.md
• Bumped version in package.json and package-lock.json (npm --no-git-tag-version version <major|minor|patch>) ref
• Updated all static build artifacts (npm run build-all)
• Reviewed and approved Chromatic visual regression tests in CI

Versioning

Patch release

Demo

Before	After

Footnotes

1. The new feature I'm looking into is related to enabling the text field to also have a slot on the right side, similar to the one for startIcon. However, the slot in question is for more than just icons. It's about enabling the text field to have a button on its right side, for instance. Anyway, this PR is not at all about that. ↩