The country select button is invisible but clickable when input is not focused

[pwlagemaat]

I use ngx-mat-intl-tel-input in an Angular 16 project.

When the ngx-mat-intl-tel-input does not have focus, the country select button is not visible. It only appears when the input gets focus. But the country select button is still clickable, so if I click on the part of the input where the country select button should be, the country select button is triggered and the country list immediately opens. Where I would think I would just click on an empty input and focus it, I suddenly get a list of countries.

The most logical would be if the country select button is always visible (even when the input has no focus). But if somehow the country select button is not visible, it should also not be clickable.

The way it works right now confuses and annoys the user

The country button is invisible when the input has no focus:

But when I click at the button part of the field, the country selection button is clicked and fired. The screenshot below is directly after the click, so the button starts to appear and then it opens the country list:

[iulianmids]

I used in my scss: .ngx-mat-tel-input-container { .mat-mdc-menu-trigger { opacity: 1!important; } }

[pwlagemaat]

It worked, thank you!