如何在“清晰模式”中设置对输入字段的聚焦

Question

我正在使用Clarity 3和Angular9。我有一个带有一个输入字段的模态窗口。当模式打开时，输入字段应处于聚焦状态。

这是我的模态窗口的代码：

<clr-modal [(clrModalOpen)]="modal">
    <h3 class="modal-title">I have a nice title</h3>
    <div class="modal-body">
        <p>This input should get the focus when modal is opened.</p>
        <input class="clr-input" type="text" #input>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-outline" (click)="close()">Close</button>
    </div>
</clr-modal>

问题是，在打开模式时，Clarity不提供回调。如果我尝试在方法open()中设置焦点，那么我将无法执行此操作，因为此时由于动画原因，模态窗口尚未打开。

@ViewChild('input', { static: false }) input: ElementRef;

open() {
    this.modal = true;
    this.input.nativeElement.focus(); // does not work
}

如果我在setTimeout上设置了一些延迟，则可以使用，但我不喜欢这种解决方案。

setTimeout(() => this.input.nativeElement.focus(), 10);

我也尝试使用指令clrFocusOnViewInit，但它也不起作用。

<input class="clr-input" type="text" #input [clrFocusOnViewInit]="true">

有人可以建议我一个好的解决方案吗？为什么指令clrFocusOnViewInit不起作用？

https://stackblitz.com/edit/clarity-focus-on-view-init

Answer 1

使用clrFocusOnViewInit在这种情况下不起作用，因为模式已经使用它来关注模式标题。根据我们的可访问性设计和研究，以确保所有用户都可以正确使用该模式。如果您选择不这样做，可能会对某些用户和可访问性合规性造成影响。

清晰度在打开状态更改时提供输出，但会立即触发，而不是在模态动画激活后触发。可以用以下两种方法解构任意两种绑定，以分别获取输入和输出。 <clr-modal [clrModalOpen]="modal" (clrModalOpenChange)="onOpen()">

如果必须更改焦点，则可以收听打开更改事件，并且可以将超时设置为1100ms，然后移动焦点。