bug: searchbar placeholder not aligned properly on iOS

[liamdebeasi]

Bug Report

Ionic version:

[x] 5.x

Current behavior:

When supplying an HTML string as placeholder for a searchbar on iOS mode, the placeholder is displayed as plaintext but not aligned properly. This is because we create a temporary span and actually render the HTML content + then get the width of the element. The actual placeholder is displayed as plaintext and therefore may have a different width.

Since the native placeholder does not accept HTML, we should not be parsing into the temporary span as HTML.

Expected behavior:

I would expect the placeholder to be aligned properly.

Steps to reproduce:

1. Create ion-searchbar in iOS mode
2. Supply a placeholder of <ion-searchbar>Test</ion-searchbar>.
3. Focus and then blur searchbar.
4. Notice placeholder label is not centered.

https://github.com/ionic-team/ionic/blob/master/core/src/components/searchbar/searchbar.tsx#L338

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.