nz-select component input search is not working under ie 11

[Alea81]

Reproduction link

https://ng-zorro-antd-ivy-rzy4ku.stackblitz.io/

Steps to reproduce

Simply type something into the control, the search is not working under internet explorer 11. Is also reproducible here: https://ng.ant.design/components/select/en

What is expected?

The search is working

What is actually happening?

Nothing is happening under ie 11.

Environment	Info
ng-zorro-antd	9.3.0
Browser	ie 11

[h4rm]

I can confirm that this issue exists, e.g., with the search box on https://ng.ant.design/components/select/en under IE11

[adiherzog]

This is a big issue for us as we need to support IE 11

[h4rm]

I could narrow it down to a problem with this template in select-top-control.component.ts:

        <nz-select-search
          [disabled]="disabled"
          [value]="inputValue!"
          [showInput]="open && showSearch"
          [mirrorSync]="false"
          [autofocus]="autofocus"
          [focusTrigger]="open"
          (isComposingChange)="isComposingChange($event)"
          (valueChange)="onInputValueChange($event)"
        ></nz-select-search>

When I change [showInput]="open && showSearch" to [showInput]="showSearch" it seems to work. Maybe the

  host: {
    '(click)': 'onHostClick()',
  }

that controls the open state:

  onHostClick(): void {
    if (!this.disabled) {
        this.openChange.next(!this.open);
    }
  }

is not working as intended.

[wenqi73]

I found the input cannot work if focused before removing "readonly" in IE11, and I change the calling sort, but it seems not work 😕.

[zorro-bot[bot]]

Hello @Alea81. We totally like your proposal/feedback, welcome to send us a Pull Request for it. Please fill the Pull Request Template here, provide documentation/test cases if needed and make sure CI passed, we will review it soon. Appreciate it advance and we are looking forward to your contribution!

你好 @Alea81, 我们完全同意你的提议/反馈，欢迎直接在此仓库 创建一个 Pull Request 来解决这个问题。请务必填写 Pull Request 内的预设模板，提供改动所需相应的测试用例、文档等，并确保 CI 通过，我们会尽快进行 Review，提前感谢和期待您的贡献！

[Alea81]

@wenqi73 The problem has something to do with the opening/focusing sequence though. The input gets the focus, but this cdk-overlay-backdrop does not get removed. I also don't know what is addding this and what for. Maybe it's for the searchbox to get an event, when it should be closed, but than it should be under the control. Anyways, the parent control of this overlay has the focus, not the input. If I remove it manually, the control is working fine. Would love to open a PR, but it would cost way more time to set up an env, and understand the logic behind this. I can test and help, if you want. Could this somehow narrow down the problem?

[wenqi73]

It's nothing to do with cdk, the tag mode select works fine.

[Alea81]

Yes, thanks, were also testing further. Something is broken with the focusing there. (We found another bug with the placeholder component + date picker component too under IE11, might be related.)