Disable auto focus in drawer of Ng Zorro & Angular

239 Views Asked by At

I would like to disable auto focus first input in Ng Zorro drawer. I know that Ng Zorro modal has a property for disabling the auto focus. But Drawer does not. I have a very bad solution: I have put a useless input and styled it like this: <input type="text" style="position: absolute; opacity: 0" />. Presently it works

If You would have a better solution than mine, Please, share your answer.

Thanks!

2

There are 2 best solutions below

1
Thien chi On

I added the tab-index property to all my inputs with -1 as value. It's work for me !

1
jamesmart On

Try adding an element like this;

<button class="opacity-0" [attr.cdkFocusInitial]="false"></button>

I dug into ng-ant-zorro to see how it was managed, saw the use of Angular Material [attr.cdkFocusInitial] so I simply added it and set it to false on a basically invisible element, seems to have fixed the focusing issue for me.

I am using TailwindCSS so opacity-0 applies the style opacity: 0;.