Ng-zorro-antd: nzShowSearch on nz-select does not work in IOS 13

[WeslleyDeSouza]

Reproduction link

https://ng-zorro-antd-start-bbhuis.stackblitz.io

Steps to reproduce

Implemented Attribute:
nzShowSearch

What is expected?

Input should be focused and keyboard should appear

What is actually happening?

Keyboard does not appear

| Environment | Info |
|---|---|
| ng-zorro-antd | 8.4.0 |
| Browser | IOS 13 | IPhone 6< |

---

similar to : https://github.com/NG-ZORRO/ng-zorro-antd/issues/1653

[WeslleyDeSouza]

the examples on the official website are also not working...
any solution to this?

[aaaahoang123]

@WeslleyDeSouza The same problem here with ios 12. I also face the #4259 when use nz-select as a search box.

And then, I've made a custom search box by nz-autocomplete like this https://stackblitz.com/edit/angular-pyvfwe to resolve those issues

It is working fine for now, at least it is useful when we wait for an official support to this.

[WeslleyDeSouza]

@aaaahoang123 Thanks for ur reply..

note:
If I remove the css class of the parent input element, the keyboard trigger starts to work again..

any update on this?

[junekpavel]

Hello,
any updates on this? It's serious problem for us.
Is there any chance this issue will be resolved in next version?
Thanks for any reply.

[WeslleyDeSouza]

yes in the mean while im using select2,
till this is fixed..

[junekpavel]

Thanks for your advice!
I've already known about select2 ... but because it needs jQuery, it's implementation would be our really really worst case scenario...
And based on their documentation, select2 doesn't cover all features we are currently using with nz-select :(

[WeslleyDeSouza]

which feautures do you need that select2 doesn't have?

[WeslleyDeSouza]

there is also an npm version of select2 but its also an jQuery wrapper

[junekpavel]

Actually, there's a lot, eg. custom compareWith function, simple ability to clear selected option, ability to pass custom template when no remote data found, etc. ...

And I assume there's no output callbacks like nzOpenChange, nzScrollToBottom, nzOnSearch available in it's Angular wrapper.

And at least there's design... it looks different (worse) than nz-select and it feels like it would't be zero-time job to make it look similar to nz-select (and rest of ng-zorro components, we're using)...

[junekpavel]

So if is there any way to speed up this bug fixation, I'm all ears.

[WeslleyDeSouza]

Is there any chance this issue will be resolved in next version?

[junekpavel]

@vthinkxie could you please provide us any information/updates about this?

[WeslleyDeSouza]

@junekpavel
could you create a new ticked?

[ajhernandez95]

@aaaahoang123 Thanks for ur reply..

note:
If I remove the css class of the parent input element, the keyboard trigger starts to work again..

• 
  any update on this?

@WeslleyDeSouza is there any way you can list the exact class you removed to get the keyboard working again on IOS?

[theadley]

Managed to fix it with a workaround!

I drew inspiration for fixing this issue from here and did the following:

In the component.less:

::ng-deep nz-select div.ant-select-search.ant-select-search--inline {
  display: block !important;
}

Alternatively, you could add it site-wide in styles.less after the styles for antd:

nz-select div.ant-select-search.ant-select-search--inline {
  display: block !important;
}

Unfortunately the !important must remain because the display style is dynamically applied ([style.display]="searchDisplay") and therefore applies after CSS applies.

Until an official fix, I hope this workaround can help someone else who's stuck pulling their hair out over this.

[zbin]

I found that long press will pop up the keyboard.

[ReinerRunge]

Managed to fix it with a workaround!

I drew inspiration for fixing this issue from here and did the following:

In the component.less:

::ng-deep nz-select div.ant-select-search.ant-select-search--inline {
  display: block !important;
}

Alternatively, you could add it site-wide in styles.less after the styles for antd:

nz-select div.ant-select-search.ant-select-search--inline {
  display: block !important;
}

Unfortunately the !important must remain because the display style is dynamically applied ([style.display]="searchDisplay") and therefore applies after CSS applies.

Until an official fix, I hope this workaround can help someone else who's stuck pulling their hair out over this.

Can confirm this workaround works

[dylanvdmerwe]

Any update on an official fix for this issue on iOS as we are experiencing this as well?

[joaomvfsantos]

This is also a major blocker for me. Hopefully it gets fixed soon.

There is a tiny gap between the beginning of the select and before the placeholder that actually triggers the input and thus the keyboard.

[WeslleyDeSouza]

Workaround dont work in 9.0.0

[KwFung7]

I figure out a workaround, I simply remove "readonly" attribute in nz-select input element to fix this issue.

const inputEle = this.renderer.selectRootElement('nz-select nz-select-search input');
this.renderer.removeAttribute(inputEle , 'readonly');

[Drunkenpilot]

I figure out a workaround, I simply remove "readonly" attribute in nz-select input element to fix this issue.

const inputEle = this.renderer.selectRootElement('nz-select nz-select-search input');
this.renderer.removeAttribute(inputEle , 'readonly');

This workaround works

 ngAfterViewInit(): void {
    setTimeout(() => {
      const allEles: any = document.querySelectorAll('nz-select nz-select-top-control nz-select-search input');
      for (const ele of allEles) {
        this.renderer.removeAttribute(ele, 'readonly');
      }
    }, 1500);

  }

  onBlur() {
    console.log('blur triggered');
    setTimeout(() => {
      const allEles: any = document.querySelectorAll('nz-select nz-select-top-control nz-select-search input');
      for (const ele of allEles) {
        this.renderer.removeAttribute(ele, 'readonly');
      }
    }, 500);
  }

<form>
.....
<nz-form-item>
<nz-form-control>
        <nz-select
          nzShowSearch
          formControlName="test1"
          (nzBlur)="onBlur()"
        >
....
</nz-select>
<nz-form-control>
</nz-form-item>

<nz-form-item>
<nz-form-control>
        <nz-select
          nzShowSearch
          formControlName="test2"
          (nzBlur)="onBlur()"
        >
....
</nz-select>
<nz-form-control>
</nz-form-item>
......
</form>

| Environment | Info |
| :---: | :---: |
ng-zorro-antd | 9.3.0 |
Browser | iOS 13.5.1 |

[Folo4ka]

fix this, please. It happening on all mobile devices, on android too.

[wenqi73]

Maybe the same problem with #5645.