how to disable select control's dropdown menu of nz-zorro-antd?

user_7511904 0
Viewed 1541

I am implementing one product in which I have integrated nz-zorro UI collection library.

I want to implement input control that can accept tags from user. nz-zorro will provide me that kind of feature with nz-select control.

when we write tag and then hit enter will convert it like chip. check below gif :

enter image description here

But this control is select control so , it will open dropdown under the control which I don't want to open.

If anyone know about how to disable only dropdown, not input control, then please help me.

I have tried this code :

<nz-form-item>
    <nz-form-control>
          <nz-select formControlName="tags" nzMode="tags" nzPlaceHolder="Add Keywords">
          </nz-select>
    </nz-form-control>
</nz-form-item>

I have also tried with custom dropdown template with nzDropdownRender option and keep template empty, but still dropdown is opening.

If anyone have any configuration about it then please mention here. it will saves my lot's of day.

angular select tags
1 Answers

After lot's of time spending on this feature, I found the solution that we can hide dropdown using css.

After some documentation, I found custom dropdown Class directive in nz-select control which can hide dropdown menu from select.

Here Is my solution :

component.ts:

<nz-form-item>
  <nz-form-control>
      <nz-select formControlName="tags" nzDropdownClassName="hide-dropdown" nzMode="tags" nzPlaceHolder="Add Keywords">
      </nz-select>
  </nz-form-control>
</nz-form-item>

in global style.css :

.hide-dropdown {
   display: none;
 }

It will only allow to enter tags by typing. not from select options...

user_75119040
Related