Skip to content

aria-hidden behaviour doesn't play well with ProseMirror #1744

@tslocke

Description

@tslocke

Not sure if this counts as a bug or a feature request...

ProseMirror (rich text editor) has a feature called node-views that allow you to embed custom UI widgets inside the editable document. One thing you have to be careful of is that ProseMirror uses MutationObserver to keep its internal state in sync with contenteditable edits, and interactive node-views can wrongly trigger it which causes bugs. The node-view api includes a method ignoreMutation which let's you fix these bugs, but it's not sufficient for zag/combobox.

That's because the node-view can only ignore dom mutations that happen inside its root element, and the aria-hidden functionality you have makes changes outside of that element. These changes cause ProseMirror to rebuild the node-view. In other words you can't interact with it at all - as soon as you do something that would open the popup it all resets.

I've tried commenting out the body of this method in combobox.machine:

        hideOtherElements(ctx) {
          return ariaHidden([dom.getInputEl(ctx), dom.getContentEl(ctx), dom.getTriggerEl(ctx)])
        },

and it fixes the problem.

Is there any supported way to disable that feature? If not would you be willing to look at a PR?

I realise it's maybe bad from an accessibility point of view. Any suggestions for a better way to fix this issue?

Zag looks like incredible work - can't believe I only just discovered it!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions