feat(components): [popover] expose hide() through slot by ZacharyBear · Pull Request #23694 · element-plus/element-plus

ZacharyBear · 2026-02-27T01:51:07Z

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.

close #23690

Summary by CodeRabbit

New Features
- The Popover's default slot now exposes a hide function, allowing custom slot content to close the popover programmatically.
Documentation
- Popover docs updated: Slots table adds a Type column and clarifies the default slot description to reflect the exposed slot properties.

github-actions · 2026-02-27T01:51:15Z

coderabbitai · 2026-02-27T01:51:28Z

📝 Walkthrough

Walkthrough

Popover's default slot now exposes a hide scoped prop; documentation adds a "Type" column and updates the default slot's description and type metadata.

Changes

Cohort / File(s)	Summary
Documentation `docs/en-US/component/popover.md`	Adds a "Type" column to the slots table; updates the default slot description to note it can receive `hide` (version ^2.13.4 and later) and sets the slot type to `^[object]`{hide: () => void}`; reference slot Type set to` -`.
Component Implementation `packages/components/popover/src/popover.vue`	Exposes internal `hide` function to slot consumers by changing `<slot>` to `<slot :hide="hide">`, making `hide` available as a slot-scoped prop.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested reviewers

btea

Poem

🐇 I found a secret, soft and sly,
A little hide to give a try,
I slipped it through the slot's sweet seam,
A rabbit's hush, a tiny dream. ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately and concisely describes the main change: exposing the hide() method through the popover slot, matching the code modifications in both the Vue template and documentation.
Description check	✅ Passed	The description includes all required template checklist items checked and references the related issue (`#23690`), though it lacks additional context about the implementation details.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

Tip

Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs).
Share your feedback on Discord.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

pkg-pr-new · 2026-02-27T01:52:55Z

Open in StackBlitz

pnpm add https://pkg.pr.new/element-plus@23694

npm i https://pkg.pr.new/element-plus@23694

yarn add https://pkg.pr.new/[email protected]

commit: 71e28a7

github-actions · 2026-02-27T02:01:49Z

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

Co-authored-by: btea <[email protected]>

coderabbitai

🧹 Nitpick comments (1)

docs/en-US/component/popover.md (1)

111-111: Clarify the slot description wording.

The phrase "can receive the hide parameter" is imprecise. The slot doesn't receive a parameter—it exposes a scoped slot prop. Consider revising for clarity:

📝 Suggested wording improvement

-| default   | content of popover, version ^(2.13.3) and later can receive the hide parameter. | ^[object]`{hide: () => void}` |
+| default   | content of popover, version ^(2.13.3) and later exposes a hide function via scoped slot. | ^[object]`{hide: () => void}` |

Alternatively:

-| default   | content of popover, version ^(2.13.3) and later can receive the hide parameter. | ^[object]`{hide: () => void}` |
+| default   | content of popover, version ^(2.13.3) and later provides access to the hide function. | ^[object]`{hide: () => void}` |

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@docs/en-US/component/popover.md` at line 111, Update the slot description row
for the "default" slot in popover docs: replace the phrase "can receive the hide
parameter" with clearer wording that it "exposes a scoped slot prop `hide`
(function)". Reference the "default" slot and the scoped slot prop name "hide"
so readers understand it's a provided prop rather than an input parameter.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@docs/en-US/component/popover.md`:
- Line 111: Update the slot description row for the "default" slot in popover
docs: replace the phrase "can receive the hide parameter" with clearer wording
that it "exposes a scoped slot prop `hide` (function)". Reference the "default"
slot and the scoped slot prop name "hide" so readers understand it's a provided
prop rather than an input parameter.

ℹ️ Review info

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 265dde5 and b859cd2.

📒 Files selected for processing (1)

docs/en-US/component/popover.md

ZacharyBear · 2026-02-27T05:36:47Z

Shall I add a test case to this slot

btea · 2026-02-27T05:38:26Z

That would be better.

keeplearning66

Thank you for your contribution! Based on the description in #23690, would directly using Popconfirm meet your needs?

ZacharyBear · 2026-02-28T03:20:59Z

Thank you for your contribution! Based on the description in #23690, would directly using Popconfirm meet your needs?

I think popconfirm couldn't achieve my needs, it does provided cancel() and confirm() prop to actions slot, but I can't write the content in , I must to write vnode and pass it into title prop.

Another reason to choose [popover] is that it offers more APIs.

keeplearning66 · 2026-03-04T01:14:49Z

I think popconfirm couldn't achieve my needs, it does provided cancel() and confirm() prop to actions slot, but I can't write the content in , I must to write vnode and pass it into title prop.

Do you mean you want to have both title and content at the same time? The title prop only supports string type.

Another reason to choose [popover] is that it offers more APIs.

Actually, some props in Popconfirm can be referenced from Popover.

ZacharyBear · 2026-03-04T01:28:29Z

I think popconfirm couldn't achieve my needs, it does provided cancel() and confirm() prop to actions slot, but I can't write the content in , I must to write vnode and pass it into title prop.

Do you mean you want to have both title and content at the same time?

Another reason to choose [popover] is that it offers more APIs.

Actually, some props in Popconfirm can be referenced from Popover.

In this sample, popover is singleton and controlled by the visible prop.

In my situation, popover has been multiple duplicate rendered in a list. Using the ref value to controll their visibility will increase the logic complixety: each popover needs a value to control visibility. Or I have to package the Popover into a single component.

I just want to hide popover from inside, by adding this context prop to default slot is greatly helpful. And I believe it could be used in more situation.

keeplearning66 · 2026-03-04T04:33:18Z

I think popconfirm couldn't achieve my needs, it does provided cancel() and confirm() prop to actions slot, but I can't write the content in , I must to write vnode and pass it into title prop.

Do you mean you want to have both title and content at the same time? The title prop only supports string type.

Thank you for your explanation. I just feel that the behavior of 'manually closing the popup through a button inside the popup' is more in line with Popconfirm. So based on my previous comment, I would like to confirm whether the existing Popconfirm truly cannot meet your needs. If it indeed cannot, then we can consider extending the component's functionality. 😃

ZacharyBear · 2026-03-04T07:17:07Z

I think popconfirm couldn't achieve my needs, it does provided cancel() and confirm() prop to actions slot, but I can't write the content in , I must to write vnode and pass it into title prop.

Do you mean you want to have both title and content at the same time? The title prop only supports string type.

Thank you for your explanation. I just feel that the behavior of 'manually closing the popup through a button inside the popup' is more in line with Popconfirm. So based on my previous comment, I would like to confirm whether the existing Popconfirm truly cannot meet your needs. If it indeed cannot, then we can consider extending the component's functionality. 😃

Here is my use-case, here is my ui looks like:

I'm implement custom [color-picker] by [color-picker-panel] and [popover]. For saving spaces, I put close button into footer slot of [color-picker-panel], neitherfooter slot of [popconfirm], it occupies a whole line.

If use [popconfirm] the close button have to be moved to footer of [popconfirm].

keeplearning66

Okay, thank you for your patient explanation. Just need to update the version number.

Co-authored-by: keeplearning66 <[email protected]>

coderabbitai

🧹 Nitpick comments (1)

docs/en-US/component/popover.md (1)
109-112: Documentation accurately reflects the slot API changes.

The Type column addition and slot documentation are correct. The type signature {hide: () => void} matches the implementation, and version 2.13.4 aligns with the previous review discussion.
Optional: Minor wording refinement for clarity

Consider adding backticks around hide in the description for consistency with documentation conventions:
-| default   | content of popover, version ^(2.13.4) and later can receive the hide parameter. | ^[object]`{hide: () => void}` |
+| default   | content of popover, version ^(2.13.4) and later can receive the `hide` parameter. | ^[object]`{hide: () => void}` |
Alternatively, for even more precision, you could rephrase to:
-| default   | content of popover, version ^(2.13.4) and later can receive the hide parameter. | ^[object]`{hide: () => void}` |
+| default   | content of popover, version ^(2.13.4) and later exposes a `hide` function in the slot scope. | ^[object]`{hide: () => void}` |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@docs/en-US/component/popover.md` around lines 109 - 112, Update the
documentation table row for the "default" slot so the description uses backticks
around the hide parameter (e.g., change "hide parameter" to "`hide` parameter")
and ensure the Type column remains `^[object]`{hide: () => void}` to match the
implementation and version note; edit the "default" row string in
docs/en-US/component/popover.md where the slot is defined to apply this wording
change.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@docs/en-US/component/popover.md`:
- Around line 109-112: Update the documentation table row for the "default" slot
so the description uses backticks around the hide parameter (e.g., change "hide
parameter" to "`hide` parameter") and ensure the Type column remains
`^[object]`{hide: () => void}` to match the implementation and version note;
edit the "default" row string in docs/en-US/component/popover.md where the slot
is defined to apply this wording change.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: f2e61976-3e8f-45e9-bcce-eac427c1d525

📥 Commits

Reviewing files that changed from the base of the PR and between b859cd2 and 68ca5b8.

📒 Files selected for processing (1)

docs/en-US/component/popover.md

keeplearning66

Thank you!

github-actions · 2026-03-06T04:29:17Z

@ZacharyBear Thanks for your contribution! ❤️

ZacharyBear added 2 commits February 27, 2026 09:49

feat(components): [popover] expose hide() through slot

f05d7e5

docs(components): [popover] update slots section

f1e025c

pull-request-triage Bot assigned ZacharyBear Feb 27, 2026

pull-request-triage Bot added the Needs Review label Feb 27, 2026

github-actions Bot added the Contribution::Community label Feb 27, 2026

github-actions Bot added the CommitMessage::Unqualified Unqualified commit message label Feb 27, 2026

Merge branch 'element-plus:dev' into popover-slot-hide

710b091

ZacharyBear changed the title ~~Popover slot hide~~ feat(components): [popover] expose hide() through slot Feb 27, 2026

github-actions Bot removed the CommitMessage::Unqualified Unqualified commit message label Feb 27, 2026

btea reviewed Feb 27, 2026

View reviewed changes

Comment thread docs/en-US/component/popover.md Outdated

ZacharyBear and others added 2 commits February 27, 2026 11:49

Update docs/en-US/component/popover.md

265dde5

Co-authored-by: btea <[email protected]>

style(docs): [popover] formatted descriptions

b859cd2

coderabbitai Bot reviewed Feb 27, 2026

View reviewed changes

btea approved these changes Feb 27, 2026

View reviewed changes

keeplearning66 reviewed Feb 27, 2026

View reviewed changes

rzzf mentioned this pull request Feb 28, 2026

feat(components): [tree/tree-v2/tree-select] setChecked supports deep check #23591

Merged

3 tasks

keeplearning66 reviewed Mar 4, 2026

View reviewed changes

Comment thread docs/en-US/component/popover.md Outdated

Update docs/en-US/component/popover.md

68ca5b8

Co-authored-by: keeplearning66 <[email protected]>

coderabbitai Bot reviewed Mar 5, 2026

View reviewed changes

keeplearning66 approved these changes Mar 6, 2026

View reviewed changes

btea merged commit ada3b2a into element-plus:dev Mar 6, 2026
15 checks passed

ZacharyBear deleted the popover-slot-hide branch March 6, 2026 09:03

element-bot mentioned this pull request Mar 6, 2026

D2M #23732

Merged

3 tasks

Uh oh!

Conversation

ZacharyBear commented Feb 27, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

github-actions Bot commented Feb 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Feb 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Suggested reviewers

Poem

Uh oh!

pkg-pr-new Bot commented Feb 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Feb 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

ZacharyBear commented Feb 27, 2026

Uh oh!

btea commented Feb 27, 2026

Uh oh!

keeplearning66 left a comment

Choose a reason for hiding this comment

Uh oh!

ZacharyBear commented Feb 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

keeplearning66 commented Mar 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ZacharyBear commented Mar 4, 2026

Uh oh!

keeplearning66 commented Mar 4, 2026

Uh oh!

ZacharyBear commented Mar 4, 2026

Uh oh!

keeplearning66 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

keeplearning66 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions Bot commented Mar 6, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

ZacharyBear commented Feb 27, 2026 •

edited by coderabbitai Bot

Loading

github-actions Bot commented Feb 27, 2026 •

edited

Loading

coderabbitai Bot commented Feb 27, 2026 •

edited

Loading

pkg-pr-new Bot commented Feb 27, 2026 •

edited

Loading

github-actions Bot commented Feb 27, 2026 •

edited

Loading

ZacharyBear commented Feb 28, 2026 •

edited

Loading

keeplearning66 commented Mar 4, 2026 •

edited

Loading