DataViews: Close action menu on Action(Modal) click

[doekenorg]

(CC @WordPress/gutenberg-components as mentioned in #56760 (comment))

What problem does this address?

When using an ActionModal from the dropdown menu with secondary actions, this action menu does not close again due to the changes made in #56760. I'd like to propose a setting where this behaviour can be disabled.

What is your proposed solution?

I would like the action-object to have a closeMenuOnClick (or something along those lines) attribute. If set to true, the menu closes after the action is clicked.

We open a modal from which shows more information about the entry you've clicked. After that, there is no need for the menu to still be open; and it takes an extra click to get rid of it.

[ciampo]

Hey @doekenorg , just to make sure I understand what is your request here:

Is your suggestion to close the dropdown menu then the modal is opened?

Our would you like the dropdown menu to stay open in the background, and close only when the modal is dismissed?

[doekenorg]

Hey @ciampo, I would like to close the dropdown when the modal is opened. So I don't want to see it when the modal is active. Usually, our actions are done when clicking the action. So afterwards I need to 1, close the modal; but then 2 also close the drop down. Thats a bit annoying.

[ciampo]

Got it!

I took a look at how the dropdown menu is implemented for this specific part of the dataviews UI:

• the dropdown is intentionally left open when clicking on an item that opens a modal dialog (see this line)
• the Modal components are rendered in the React tree alongside the Menu.Item that triggers them (see code). As a consequence, any Modals will be removed from the DOM when the menu is closed.

To achieve the desired behavior (ie. the dropdown menu closes when clicking on an item, while a modal shows on top) a little re-architecture of the file linked above is necessary:

• move the Modal components outside of the Menu component
• remove the hideOnClick prop from the Menu.Item

You can also take a look at this Storybook example, illustrating how to render a Modal "inside" the menu (ie. the current situation) and "outside" the menu (ie. the suggested approach to allow the menu to close).

(cc @ntsekouras @oandregal )

[ntsekouras]

Hey @ciampo, I would like to close the dropdown when the modal is opened

Would that be good for a11y? I'm not sure it would be and especially if a user would click a cancel/close button.

I get the use case described here, but should the actions API be aware of where it renders (parent)? Noting that the actions API are used both in DataViews and in post summary (inspector controls).

Currently we render these actions either inline (primary) or in one level dialogs (Menu). The suggested closeMenuOnClick prop feels arbitrary making assumptions where the actions are rendered.

I'd love some other thoughts though.

[doekenorg]

Would that be good for a11y? I'm not sure it would be and especially if a user would click a cancel/close button.

Yeah, unfortunately there isn't always a one true path in these situations. As usually it highly depends. And your situation is very fair. In that case it could make sense to keep the menu open when clicking cancel, and close it when the action is fired or the modal is closed. However, not all modals have these options. Some just show information. That's why I'm looking for a way that could work, or made to work, in basically any situation.

I get the use case described here, but should the actions API be aware of where it renders (parent)? Noting that the actions API are used both in DataViews and in post summary (inspector controls).
Currently we render these actions either inline (primary) or in one level dialogs (Menu). The suggested closeMenuOnClick prop feels arbitrary making assumptions where the actions are rendered.

This is also a fair assessment. I does assume the action is inside the dropdown, or at least clicked there. If anything I'm looking for a way to have the programmatic option to hide it. So a way to get to the context, and toggle that switch "personally". So a callback, or a context parameter somewhere where I can address certain parts of the View would also be great. The prop was just the first thing that popped up in my head. But I'm very open to other solutions to this situation.

[ciampo]

I get the use case described here, but should the actions API be aware of where it renders (parent)? Noting that the actions API are used both in DataViews and in post summary (inspector controls).
Currently we render these actions either inline (primary) or in one level dialogs (Menu). The suggested closeMenuOnClick prop feels arbitrary making assumptions where the actions are rendered.

I agree that we shouldn't add a closeMenuOnClick prop, since actions are not only used inside a menu. Or any other APIs that rely on where the actions are rendered.

Would that be good for a11y? I'm not sure it would be and especially if a user would click a cancel/close button.

I don't personally think it would be a problem. I just spent some time testing MacOS and other software that I use daily, and usually dropdown menus are closed when opening a modal (even if the modal cancels). What's important is that we can restore focus correctly when the modal closes — meaning that focus should get back to the dropdown menu trigger when the modal is closed.

[ciampo]

@doekenorg just circling back to you — with #67664 merged, the issue that you raised should be fixed. Can you confirm on your end?

[doekenorg]

@ciampo Yes! I have yet to test it in our plugin, but just testing the storybook it already works as I expect. So thank you very much!

[ciampo]

Thank you @ntsekouras for working up the necessary changes :)