如何在清晰度模式中將焦點設置在輸入字段上

Question

我正在使用 Clarity 3 和 Angular 9。我有帶有一個輸入字段的模態 window。 打開模式時，輸入字段應位於焦點 state 中。

這是我的模態 window 的代碼：

<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()中設置焦點，那么我不能這樣做，因為此時由於 animation 模態 window 尚未打開。

@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

更新

我在 Clarity 項目中創建了一個功能請求： https://github.com/vmware/clarity/issues/4476

Answer 1

在這種情況下，使用clrFocusOnViewInit不起作用，因為模態已經使用它來關注模態標題。 這是根據我們的可訪問性設計和研究，以確保所有用戶都可以正確使用模態。 如果您選擇 go 反對這一點，它可能會對某些用戶和可訪問性合規性產生影響。

當打開的 state 更改時，Clarity 提供了 output，但它會立即觸發，而不是在模態動畫進入后觸發。任何兩種方式的綁定都可以解構為以下內容以分別獲取輸入和 Z78E6221F6393D11CE5DZ686868。 <clr-modal [clrModalOpen]="modal" (clrModalOpenChange)="onOpen()">

如果你必須改變焦點，那么你將能夠監聽 open change 事件，你可以設置一個 1100ms 的超時時間然后移動焦點。

Answer 2

嘗試從您想要的位置開始使用 clrFocusTrap="1" 。