Bug in IE11: Styling broken and select not useable in automation scenarios

[Sabartius]

Hi,

in Internet Explorer 11 the styling of the component is broken. It breaks out of the Overlay and there is no Placeholder inside the input.

Furthermore the component is not useable when automating the application with tools like protractor.
Protractor tries to "scrollIntoView" the specific Option it wants to click onto, but in this case it scrolls right under the search-input, so that it is not clickable.

[macjohnny]

@Sabartius thanks for reporting the issue!

in Internet Explorer 11 the styling of the component is broken. It breaks out of the Overlay and there is no Placeholder inside the input.

Unfortunately, I am not able to reproduce your IE11 width issue. This is what I get with IE11:

Could you provide more details how you used the component?
However, the placeholder is missing, as you reported. Would you like to give it a try and implement a fix?

Furthermore the component is not useable when automating the application with tools like protractor.
Protractor tries to "scrollIntoView" the specific Option it wants to click onto, but in this case it scrolls right under the search-input, so that it is not clickable.

I don't yet know how this problem arises, since the search field correctly takes up the space needed and shifts the options down. Could you create a dummy html / css demonstrating the problem?

[Sabartius]

I reproduced it: https://stackblitz.com/edit/github-kygcsp?file=src%2Fapp%2Fapp.component.ts

The Select-Panel has a hard max-width of 280px. If an MatOption has a longer text, the search Input seems to grow further, than this maximum.

When you open the Panel it should automatically scroll to Bank K (Italy), but because the Input overlays it, you can't see it

[macjohnny]

@Sabartius thanks for the example showing the issue.
Indeed, now I can also reproduce the width-issue in IE. I think this is related to the code in https://github.com/bithost-gmbh/ngx-mat-select-search/blob/master/src/app/mat-select-search/mat-select-search.component.ts#L375-L398

Could you please help me and find a solution for it?

Could you also propose a solution to the automation issue?

[macjohnny]

@Sabartius could you please open a separate issue concerning the automation part? I think we can find a way to achieve this without changing the layout.

[macjohnny]

@Sabartius would you mind stating the automation case in a separate issue? I guess this could be solved with test-specific css styles.

[Sabartius]

@macjohnny test-specific css styles are not an option in my opinion, especially not in an end2end scenario. But i solved it in a more pragmatic way: by filtering for the option i need, so that there is no scrolling inside the select necessary.

[macjohnny]

@Sabartius thanks for the feedback.
I agree, an E2E scenario should be as close to reality as possible. However, the mechanism of scrolling an element into the view should also be able to handle this situation, or maybe it could be adapted to take an offset into account.

Nevertheless I am glad you could solve your issue.
If you have any other suggestion for a bugfix or improvement, you are welcome to open an issue and/or a PR.