Customizer: Can't get out of search view in Menu editor

[garrett-eclipse]

Hello,

While testing a patch for customizer I used the search function on the Menu editor. This works and I can add items form it. But I can't leave the menu search and return to the previous view. It persists after you click the X, which just clears the input, and stays there even if you go out of the menu to another menu... I have to reload to return to the normal view.

It would be nice to latch into the X on the search input so when you clear your search it switches views. If users want to search again the input it still present. Maybe along with tieing into the X also just revert views when the input is emptied and only switch to search results when text has been input.

Thanks

[garrett-eclipse]

Illustration of issue, can't get the search view to dismiss unless I reload.

[garrett-eclipse]

Oo... hmm the loop in my GIF makes it look like you do return to the default view... thats just the gif looping back to the start.

[tobifjellner]

The function of that little "x" seems to simply be to clear the search field, not to close the whole search pane.

[garrett-eclipse]

Replying to tobifjellner:

The function of that little "x" seems to simply be to clear the search field, not to close the whole search pane.

Thanks @tobifjellner that's what I found as well, it simply dismisses the text but really should revert the view as there's no way currently to get back to the previous view without a reload.

[dlh]

#49444 was marked as a duplicate.

[afercia]

Additional details:

• when clearing the search field using the keyboard, either with the Backspace key or Cmd (Ctrl) + A and delete, the menu items list gets back
• when clicking the clear-results button, it doesn't

[garrett-eclipse]

Update the clear-results action to reset the search panel.

[garrett-eclipse]

Gif to illustrate the fix and how clicking the clear-results will reset the search panel.

[garrett-eclipse]

Thanks for pointing me in the right direction @afercia, I've uploaded an initial patch to address this in 48198.diff.

Please test, I've uploaded a screencast of the resulting change. Now when clicking the clear-results X button we reset the search panel and hide the X button.

Note: I'm not overly familiar with Customizer js so am unsure if how I setup the $searchSection\$otherSections variables is correct or if they should be attached to this like is done with this.$clearResults and this.$search.

[afercia]

After some additional software archeology, I think this broke in WordPress 5.1 after [44539] where the keyup event was removed for both the Menus and Widgets searches.

The keyup event was also programmatically triggered to clear the search and reset the search results thus also the Widgets search reset was broken.

[45658] / #47534 fixed the issue for the Widgets but it didn't fix the Menus.

48198.2.diff​ just changes the keyup remnants to input to restore the intended behavior. It's a simpler approach and doesn't require to repeat code that is already in place. Some testing would be nice :)

Note: the patch also removes some stray spaces and tab characters because my editor does that automatically.

[garrett-eclipse]

Implement similar approach to the Widgets Search

[garrett-eclipse]

Thanks @afercia that's a much more elegant approach. Testing it works nicely, but I found the widgets doesn't clear the X so I applied similar logic to the widgets to have the two search mechanism fall in line. I applied that in 48198.3.diff.
Please review and more testing is welcome.

[garrett-eclipse]

Updated comment in Widgets to match

[garrett-eclipse]

Remove newline I added unintentionally

[JavierCasares]

Hello @garrett-eclipse

I'm testing it (5.5a) but does not work for me.

Also, if you click the "Add items" (in customizer), write something, and click again the "add item" button to close, and them click it again, the input is empty, but the list remains the same (with the last result list). So, should it be empty when you close the panel?

[garrett-eclipse]

Thanks for testing @JavierCasares.

Reapplying the patch on a fresh trunk everything functioned as expected for me along with when you close the panel and reopen it clears the search. Did you ​apply the patch before building the install?

What setup and browser are you using? Happy to help figure out what's going on here, feel free to ping me on slack (@garrett-eclipse) and hopefully we can isolate the issues you're having.

[dlh]

#50045 was marked as a duplicate.

[garrett-eclipse]

Retesting on trunk this is working nicely for me, @JavierCasares @dlh @afercia if you have time to test I feel this is ready to be committed.

[whyisjake]

In 48461:

Customize: Ensure that widgets and nav-menus can be closed after entering content.

Previously, the ⌧ button would close the search panel, or remove the results. This restores that, in addition pressing escape will do the same.

Fixes #48198.

Props garrett-eclipse, tobifjellner, afercia, JavierCasares.