feat(components): [el-menu] allow user to hide menu when clicking outside by cuongle-hdwebsoft · Pull Request #14742 · element-plus/element-plus

cuongle-hdwebsoft · 2023-11-04T05:35:39Z

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

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)

when user sets `menu-trigger` to `click` and then clicking outside, it should be close menu closed element-plus#14738

pull-request-triage · 2023-11-04T05:35:45Z

👋 @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 · 2023-11-04T05:35:51Z

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

github-actions · 2023-11-04T05:35:52Z

github-actions · 2023-11-04T05:54:47Z

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

cuongle-hdwebsoft · 2023-11-04T06:49:53Z

Before: link

After fix: link

Steps:

Open submenu
Click outside
The menu should be hidden

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

Dmaziyo · 2023-11-07T06:42:17Z

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 · 2023-11-08T02:15:24Z

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 · 2023-11-09T02:06:03Z

Hi @Dmaziyo you can checkout new update here

ryuhangyeong

great!

I think it's a good feature.

ryuhangyeong · 2023-11-10T03:33:45Z

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

kooriookami · 2023-12-06T10:07:17Z

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

cuongle-hdwebsoft · 2023-12-06T10:28:39Z

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

Yes I've done @kooriookami

kooriookami · 2023-12-07T01:54:18Z

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 · 2023-12-07T05:42:10Z

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 · 2023-12-08T03:29:11Z

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 · 2023-12-13T11:01:42Z

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

kooriookami · 2023-12-13T14:58:15Z

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

docs/en-US/component/menu.md

packages/components/menu/src/menu.ts

docs/en-US/component/menu.md

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.

.vscode/settings.json

fix(components): allow user to hide menu when clicking outside

fb1c4cf

when user sets `menu-trigger` to `click` and then clicking outside, it should be close menu closed element-plus#14738

pull-request-triage bot assigned cuongle-hdwebsoft Nov 4, 2023

pull-request-triage bot added the Needs Review label Nov 4, 2023

github-actions bot added the Contribution::Community label Nov 4, 2023

revert settings.json config

ed9252c

github-actions bot added the CommitMessage::Qualified Qualified commit message label Nov 4, 2023

Cuong Le added 2 commits November 4, 2023 12:43

fix: debounce hide menu when clicking out side

44cead8

Merge branch 'element-dev' into fix-menu

2f3081c

Cuong Le added 4 commits November 4, 2023 13:10

fix: only trigger click outside when menu is open

f7d7a15

fix: hide parent menu

1564a6b

fix: only trigger close menu when its opened

e1d771b

refactor: remove redundant code

fc256dc

cuongle-hdwebsoft marked this pull request as ready for review November 4, 2023 06:49

refactor: remove redundant code

fc6a147

cuongle-hdwebsoft marked this pull request as draft November 8, 2023 02:16

Cuong Le added 3 commits November 9, 2023 08:37

fix(docs): collapse-on-click-outside prop

67a4e56

Merge branch 'element-dev' into fix-menu

c8d690d

fix(docs): collapse-on-click-outside prop

8344f58

cuongle-hdwebsoft marked this pull request as ready for review November 9, 2023 02:06

ryuhangyeong approved these changes Nov 10, 2023

View reviewed changes

cuongle-hdwebsoft changed the title ~~fix(components): allow user to hide menu when clicking outside~~ feat(components): [el-menu] allow user to hide menu when clicking outside Nov 10, 2023

Cuong Le added 2 commits December 4, 2023 09:56

fix: get correct index path

6fb8fbc

Merge remote-tracking branch 'origin/fix-menu' into fix-menu

73d652e

cuongle-hdwebsoft requested a review from tolking December 4, 2023 03:05

Cuong Le added 2 commits December 6, 2023 17:12

Merge branch 'element-dev' into fix-menu

7b79060

fix: build

05bd77c

Merge branch 'dev' into fix-menu

5d76628

kooriookami requested a review from FrontEndDog December 13, 2023 14:59

FrontEndDog reviewed Dec 14, 2023

View reviewed changes

docs/en-US/component/menu.md Outdated Show resolved Hide resolved

packages/components/menu/src/menu.ts Outdated Show resolved Hide resolved

cuongle-hdwebsoft and others added 2 commits December 14, 2023 09:28

Merge branch 'dev' into fix-menu

937d9ad

refactor: update docs and remove unref

8d64c13

FrontEndDog reviewed Dec 14, 2023

View reviewed changes

packages/components/menu/src/menu.ts Outdated Show resolved Hide resolved

packages/components/menu/src/menu.ts Outdated Show resolved Hide resolved

fix: change collapseOnClickOutside to closeOnClickOutside

e82e6ae

cuongle-hdwebsoft requested a review from FrontEndDog December 14, 2023 03:18

FrontEndDog reviewed Dec 14, 2023

View reviewed changes

docs/en-US/component/menu.md Outdated Show resolved Hide resolved

fix: remove hideTimeout prop

cc3b3d4

cuongle-hdwebsoft requested a review from FrontEndDog December 14, 2023 05:04

FrontEndDog approved these changes Dec 14, 2023

View reviewed changes

chenxch mentioned this pull request Dec 14, 2023

[Component] [menu] el-menu 横向菜单失焦后没有自动收回 #15143

Closed

chenxch approved these changes Dec 15, 2023

View reviewed changes

chenxch reviewed Dec 15, 2023

View reviewed changes

.vscode/settings.json Outdated Show resolved Hide resolved

kooriookami approved these changes Dec 15, 2023

View reviewed changes

kooriookami merged commit 7f687ae into element-plus:dev Dec 15, 2023

element-bot mentioned this pull request Dec 15, 2023

D2M #15165

Merged

3 tasks

Uh oh!

Conversation

cuongle-hdwebsoft commented Nov 4, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

🤖 Generated by Copilot at fb1c4cf

Related Issue

Explanation of Changes

🤖 Generated by Copilot at fb1c4cf

Uh oh!

pull-request-triage bot commented Nov 4, 2023

Uh oh!

github-actions bot commented Nov 4, 2023

Uh oh!

github-actions bot commented Nov 4, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Nov 4, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cuongle-hdwebsoft commented Nov 4, 2023

Uh oh!

Dmaziyo commented Nov 7, 2023

Uh oh!

cuongle-hdwebsoft commented Nov 8, 2023

Uh oh!

cuongle-hdwebsoft commented Nov 9, 2023

Uh oh!

ryuhangyeong left a comment

Choose a reason for hiding this comment

Uh oh!

ryuhangyeong commented Nov 10, 2023

Uh oh!

kooriookami commented Dec 6, 2023

Uh oh!

cuongle-hdwebsoft commented Dec 6, 2023

Uh oh!

kooriookami commented Dec 7, 2023

Uh oh!

chenxch commented Dec 7, 2023

Uh oh!

cuongle-hdwebsoft commented Dec 8, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cuongle-hdwebsoft commented Dec 13, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kooriookami commented Dec 13, 2023

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

FrontEndDog left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

chenxch left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

cuongle-hdwebsoft commented Nov 4, 2023 •

edited

Loading

`🤖 Generated by Copilot at fb1c4cf`

`🤖 Generated by Copilot at fb1c4cf`

github-actions bot commented Nov 4, 2023 •

edited

Loading

github-actions bot commented Nov 4, 2023 •

edited

Loading

cuongle-hdwebsoft commented Dec 8, 2023 •

edited

Loading

cuongle-hdwebsoft commented Dec 13, 2023 •

edited

Loading

FrontEndDog left a comment •

edited

Loading