Ionic-framework: bug: ionFocus event for searchbar causes icon to move out of place

[narhc8]

Bug Report

Ionic version:


[x] 5.0.5

Current behavior:

When focusing on the ion-searchbar, the icon moves out of place to the right overlapping the placeholder content.

Expected behavior:

When focusing on the ion-searchbar should move the contents to the left for user to input values in the search bar. This issue does not occur with the other searchbar events I.e ionChange, ionInput, ionBlur etc.

Steps to reproduce:

• Add a ion-searchbar element that includes the ionFocus event as well as a placeholder for the search bar.
• Set animated='true' within the search bar element
• Click on the search bar to go into focus

Related code:
https://github.com/narhc8/ngx-image-cropper-repo

[narhc8]

After doing a bit more digging, it looks like the following is being appended to the search bar when you click on the input field when you have (ionFocus):

.searchbar-search-icon 
.sc-ion-searchbar-ios {
     margin-left: unset;
     -webkit-margin-start: calc(50%-60px);
     margin-inline-start: calc(50%-60px);
}

Whereas when you don't have (ionFocus) the correct classes are appended to the search bar to align the search icon to the left:

.searchbar-left-aligned 
.sc-ion-searchbar-ios-h 
.searchbar-search-icon 
.sc-ion-searchbar-ios {
     margin-left: unset;
     -webkit-margin-start: 0;
     margin-inline-start: 0;
}

This may or may not be what's causing it but it looked weird and could potentially be problem.

[narhc8]

Hey @liamdebeasi any idea on when to expect a fix?

[msimkunas]

I'm experiencing this issue as well.