feat(components): [el-menu] allow user to hide menu when clicking outside

[cuongle-hdwebsoft]

when user sets menu-trigger to click and then clicking outside, it should be close menu

closed #14738

Please make sure these boxes are checked before submitting your PR, thank you!

• Make sure you follow contributing guide English | (中文 | Español | Français).
• Make sure you are merging your commits to dev branch.
• Add some descriptions and refer to relative issues for your PR.

Description

🤖 Generated by Copilot at fb1c4cf

This pull request adds a onClickOutside feature to the sub-menu component and disables auto-formatting in VSCode. It improves the user experience of the menu and avoids potential code style issues.

Related Issue

Fixes #14738

Explanation of Changes

🤖 Generated by Copilot at fb1c4cf

• Import onClickOutside function from @vueuse/core library to detect clicks outside of sub-menu elements (link)
• Add mouseInChild reactive property to sub-menu component to track whether the mouse is inside the sub-menu items or not (link, link)
• Use onClickOutside function in sub-menu component's setup function, passing the popper element and a callback that closes the sub-menu if the mouse is outside of the sub-menu trigger and items (link)

[pull-request-triage]

👋 @cuongle-hdwebsoft, thank you for contributing element-plus.

• You can comment with /label Components:[component_name] to add a label for which component you are working on.
• You may join our for staying tuned.

[github-actions]

Hello @cuongle-hdwebsoft, thank you for contributing to element-plus, please see our guideline to see how to make contribution

[github-actions]

[github-actions]

🧪 Playground Preview: https://element-plus.run/?pr=14742
Please comment the example via this playground if needed.

[cuongle-hdwebsoft]

Before: link

After fix: link

Steps:

1. Open submenu
2. Click outside
3. The menu should be hidden

CleanShot.2023-11-04.at.13.49.03.mp4

[Dmaziyo]

I was just wondering if we can provide a prop for the menu, such as "collapse-on-click-outside," to allow the user to decide whether to hide it when clicking outside.

[cuongle-hdwebsoft]

I was just wondering if we can provide a prop for the menu, such as "collapse-on-click-outside," to allow the user to decide whether to hide it when clicking outside.

Thank you for your suggestion @Dmaziyo. I think that's a good spot and I will add new props collapse-on-click-outside on the next commit. 🍻

[cuongle-hdwebsoft]

Hi @Dmaziyo you can checkout new update here

[ryuhangyeong]

great!

I think it's a good feature.

[ryuhangyeong]

However, this is more of a feature than a bug fix.

[kooriookami]

Please change tag version to 2.5.0 for next upgrade. :D

[cuongle-hdwebsoft]

Please change tag version to 2.5.0 for next upgrade. :D

Yes I've done @kooriookami

[kooriookami]

I have a question, when I clicked the submenu, the menu hide without timeout. And when I clicked the outside, it has timeout.

QQ2023127-94835-HD.mp4

May be can refer to Dropdown,(only works when trigger is hover):
https://element-plus.org/en-US/component/dropdown.html#dropdown-attributes

What do you think? @btea @ryuhangyeong @chenxch

[chenxch]

There are already attributes related to hide-timeout in the attributes of submenu. What kind of relationship does the hide-timeout in el-menu have?

[cuongle-hdwebsoft]

There are already attributes related to hide-timeout in the attributes of submenu. What kind of relationship does the hide-timeout in el-menu have?

When clicking outside, that hide-timeout in the menu will emit/close all the opened sub-menus. @chenxch

[cuongle-hdwebsoft]

I hope I can receive new feedback. Did I address your question correctly? Otherwise Could you please make it clear to me? @chenxch

[kooriookami]

@cuongle-hdwebsoft I suggest that hide-timeout only works in hover mode. I refered to other framework like antd vue.

[FrontEndDog]

Thank your contribute! It's a great feature.

[chenxch]

@cuongle-hdwebsoft Sorry, I missed the message. Judging from the current results, I have no doubts. Thank you for everything.