-
Notifications
You must be signed in to change notification settings - Fork 4.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Close the dropdown when creating a new menu in the Nav block #43529
Conversation
Size Change: +5 B (0%) Total Size: 1.24 MB
ℹ️ View Unchanged
|
I'd love to do this on top of #42987 to avoid useless conflicts :) Is it possible? |
@draganescu Would you prefer to handle that or would you like me to jump in? |
I am not sure but I think porting over the behavior in Fix navigation select menu focus loss into Improves the UX of menu management in the navigation block |
Fixes slow connection UX by disabling and enabling the selector and the manage menus link depending on data status. Co-authored-by: Dave Smith <444434+getdave@users.noreply.github.com>
Yes, let's close this as well for #42987 |
Fixes slow connection UX by disabling and enabling the selector and the manage menus link depending on data status. Co-authored-by: Dave Smith <444434+getdave@users.noreply.github.com>
* adds a list view with the navigation block inner blocks to the block's inspector * adds a first toolpanel item * stub toolpanel item * moves the menu selector block controls to the inspector * fixes label update bug * labels navigation menu selector if no menus or deleted menu, fixes label when importing classic menu * adds the chevron * only show no menus label if no block menus exist, disregard classic menus * adds check for permissions on the manage menus link; removes rogue showManageActions * Implements handling focus persistence in the Navigation Selector according to #42956 Switching between menus keeps the menu open and focused on the current selection. Importing classic menus or creating new ones focuses the current navigation block. Co-authored-by: Daniel Richards <677833+talldan@users.noreply.github.com> * It looks like `hasManagePermissions` is not cached between API calls so we refresh this quite often when switching between menus. For a more consistent UI experience we disabe the menu management link untill `hasManagePermissions` is refreshed. Another option would be to cache this at a component level. But, this could be more accurate? * Closes the dropdown when importing or creating new menu as in #43529 Fixes slow connection UX by disabling and enabling the selector and the manage menus link depending on data status. Co-authored-by: Dave Smith <444434+getdave@users.noreply.github.com> * Larger commit, adds: - The label of the currently selected menu updates if menu is renamed from advanced - Uses a visually hidden label to explain this is a menu switcher - Defaults to a button if there are no block menus and no classic menus - Renames "Loading options ..." to "Loading ..." Co-authored-by: Javier Arce <4933+javierarce@users.noreply.github.com> Co-authored-by: Alex Stine <13755480+alexstine@users.noreply.github.com> * move styles to editor.scss as they are only needed for the editor * use flex rather than absolute positioning * alphabetize CSS properties * Incorporates review feedback: - replaces disabled with isBusy for toggle working state - refactores some conditionals for better readability - adds consistency to the toggle label Co-authored-by: Daniel Richards <677833+talldan@users.noreply.github.com> Co-authored-by: Dave Smith <444434+getdave@users.noreply.github.com> Co-authored-by: Javier Arce <4933+javierarce@users.noreply.github.com> Co-authored-by: Paal Joachim Romdahl <5323259+paaljoachim@users.noreply.github.com> Co-authored-by: Daniel Richards <677833+talldan@users.noreply.github.com> Co-authored-by: Dave Smith <444434+getdave@users.noreply.github.com> Co-authored-by: Javier Arce <4933+javierarce@users.noreply.github.com> Co-authored-by: Alex Stine <13755480+alexstine@users.noreply.github.com> Co-authored-by: Ben Dwyer <ben@scruffian.com> Co-authored-by: Paal Joachim Romdahl <5323259+paaljoachim@users.noreply.github.com>
What?
Fixes the Nav block so that when you click
Create new menu
the UI responds immediately and the dropdown menu is closed.Also protects against repeatedly triggering the "create" or "convert classic" actions by hiding the dropdown meny entirely if one of these actions is in progress.
Question: is it ok to remove the Select Menu from the DOM due to a11y focus concerns?
Why?
Previously if you click on
Create new menu
under theSelect Menu
dropdown the UI would appear unresponsive in that the dropdown would remain open. Granted thanks to previous work the block showed some feedback as to the progress but the dropdown obsecured this.What's worse is that because the
Create new menu
option wasn't disabled, you could simply click the menu option multiple times leading to multiple copies of the same Navigation being created.You could also do the same with the convert classic menus action.
How?
This PR calls the
onClose
callback to ensure that the dropdown is closed as soon as you click on theCreate new menu
option. This ensures that the previous problems are removed.It also ensures that the dropdown menu is not in the DOM if either creating a menu or converting a classic menu.
Testing Instructions
It's worth trying the following on a slow network connection (tip: use dev tools!) to really see the difference between this PR and
trunk
:Select menu
and then clickCreate new menu
.Repeat the above but this time try converting a classic menu instead.
Screenshots or screencast
Screen.Capture.on.2022-08-23.at.16-49-52.mov