MDCDialog 未捕获错误：FocusTrap：元素必须至少有一个可聚焦的子元素

问题描述

我有一个 Vue 单文件组件，我尝试在其中使用 Material Dialog，如下所示：

<template>
    <div v-show="open" id="emergency-details-dialog" class="mdc-dialog"
         ref="mainContainer"
    >
        <div class="mdc-dialog__container">
            <div class="mdc-dialog__surface"
                 role="dialog"
                 aria-modal="true"
                 aria-labelledby="my-dialog-title"
                 aria-describaedby="my-dialog-content"
            >
                <div class="mdc-dialog__content" id="my-dialog-content">
                    discard draft?
                </div>
                <div class="mdc-dialog__actions">
                    <button type="button" class="mdc-button mdc-dialog__button"
                            data-mdc-dialog-action="cancel">
                        <div class="mdc-button__ripple"></div>
                        <span class="mdc-button__label">Cancel</span>
                    </button>
                    <button type="button" class="mdc-button mdc-dialog__button"
                            data-mdc-dialog-action="discard">
                        <div class="mdc-button__ripple"></div>
                        <span class="mdc-button__label">discard</span>
                    </button>
                </div>
            </div>
        </div>
        <div class="mdc-dialog__scrim"></div>
    </div>
</template>

<script>
import {MDCDialog} from '@material/dialog'

export default {
    name: 'EmergencyContactDialog',data() {
        return {
            dialog: null,}
    },computed: {
        open() {
            const module = 'clientDetails/editableDetails/person/ec/isDialogopen'
            return this.$store.getters[module]
        },},watch: {
        open() {
            if (this.open) {
                this.dialog.open()
            } else {
                this.dialog.close()
            }
        },mounted() {
        this.dialog = new MDCDialog(this.$refs.mainContainer)
    },}
</script>

<style scoped>

</style>

但是，当我通过 dispatch 操作将 isDialogopen 设置为 true 时，我收到以下控制台错误：

Uncaught Error: FocusTrap: Element must have at least one focusable child.

另外，this.dialog.focusTrap_.elFocusedBeforeTrapFocus 是 null。在该项目中，我们有另一个运行良好的 Material Dialog，它通过调度 vuex 操作和调用 this.dialog.open() 遵循几乎相同的打开语法，但是那个具有 this.dialog.focusTrap_.elFocusedBeforeTrapFocus 的 body 元素。我不知道这是否可能是发生错误的原因，也不知道如何设置 elFocusedBeforeTrapFocus

MDCDialog 的 README 有以下关于 focusTrap()

The MDCDialog component uses the focus-trap package to handle this. You can use util.createFocusTrapInstance() (see below) to easily create a focus trapping solution for your component code.

如果可以解决问题，我只是不太确定如何正确创建 focusTrap()。

解决方法

确保您的对话框 (.mdc-dialog) 实际注入到 DOM 中，并且它至少包含一个元素 a、input、textarea、{{ 1}} 或带有 tabindex 属性集的 select。

有关信息，这里是 trapFocus 调用的函数（来自 button）：

focus-trap.js