vue.js - MDCDialog 未捕获错误 : FocusTrap: Element must have at least one focusable child

Question

我有一个 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 body 元素的 .dialog.focusTrap_.elFocusedBeforeTrapFocus。我不知道这是否是导致错误发生的原因，也不知道如何设置 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() 是否可以解决问题。

Answer 1

确保您的对话框 (.mdc-dialog) 实际上已注入(inject)到 DOM 中，并且它至少包含一个元素 a，input、textarea、select 或设置了 tabindex 属性的 button。

有关信息，这是 trapFocus 调用的函数(来自 focus-trap.js):

 var FOCUS_SENTINEL_CLASS = 'mdc-dom-focus-sentinel';
[...]
 FocusTrap.prototype.getFocusableElements = function (root) {
        var focusableEls = [].slice.call(root.querySelectorAll('[autofocus], [tabindex], a, input, textarea, select, button'));
        return focusableEls.filter(function (el) {
            var isDisabledOrHidden = el.getAttribute('aria-disabled') === 'true' ||
                el.getAttribute('disabled') != null ||
                el.getAttribute('hidden') != null ||
                el.getAttribute('aria-hidden') === 'true';
            var isTabbableAndVisible = el.tabIndex >= 0 &&
                el.getBoundingClientRect().width > 0 &&
                !el.classList.contains(FOCUS_SENTINEL_CLASS) && !isDisabledOrHidden;
            var isProgrammaticallyHidden = false;
            if (isTabbableAndVisible) {
                var style = getComputedStyle(el);
                isProgrammaticallyHidden =
                    style.display === 'none' || style.visibility === 'hidden';
            }
            return isTabbableAndVisible && !isProgrammaticallyHidden;
        });
    };