Skip to content

Popovers: Make overlay popovers non-modal by default#12101

Merged
danielchalmers merged 4 commits intodevfrom
copilot/make-overlay-popovers-non-modal
Nov 23, 2025
Merged

Popovers: Make overlay popovers non-modal by default#12101
danielchalmers merged 4 commits intodevfrom
copilot/make-overlay-popovers-non-modal

Conversation

Copy link
Contributor

Copilot AI commented Nov 12, 2025 •
edited
Loading

Changes the default behavior of overlay popovers (Menu, Select, Autocomplete, Pickers) from modal to non-modal, enabling a snappier UI/UX by allowing background interaction while popovers are open.

Core Change:

  • MudGlobal.PopoverDefaults.ModalOverlay: true → false

Documentation Updates:

  • Removed redundant Modal="false" attributes from examples (now default)
  • Updated playground defaults from _modal = true to _modal; (using default bool value)
  • Reversed MenuModalExample to show non-modal first (default), modal second (requires Modal="true")
  • Removed redundant "Inline Non-modal Mode" sections from DatePicker, TimePicker, ColorPicker, and DateRangePicker pages (only showed default behavior)
  • Deleted associated example files that demonstrated only default behavior

Migration:
Users wanting modal behavior can set Modal="true" per component or globally via MudGlobal.PopoverDefaults.ModalOverlay = true.

Checklist:

  • The PR is submitted to the correct branch (dev).
  • My code follows the style of this project.
  • I've added relevant tests or confirmed existing ones.

Fixes #11639

Original prompt

This section details on the original issue you should resolve

<issue_title>Make overlay popovers non-modal by default</issue_title>
<issue_description>### Describe your idea

Current behavior which requires an additional click to discard the overlay:

Video5.mp4

We have the option to make overlay popovers non-modal in Menu, Picker, Select, Autocomplete, but it's modal by default.

In the next major version we can change this behavior to promote a snappier UI/UX

Video6.mp4

Alternatives and examples

It's easy to change this one property which applies to all by default:

MudBlazor/src/MudBlazor/Services/MudGlobal.cs

Line 140 in b8c6088

public static bool ModalOverlay { get; set; } = true;
</issue_description>

<agent_instructions>Remember to update the default values in the docs/examples/tests</agent_instructions>

Comments on the Issue (you are @copilot in this section)

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

Copilot AI changed the title [WIP] Make overlay popovers non-modal by default Make overlay popovers non-modal by default Nov 12, 2025
Copilot AI requested a review from danielchalmers November 12, 2025 02:00
@danielchalmers
Copy link
Member

danielchalmers commented Nov 12, 2025

@copilot

  1. Remove the ColorPicker, TimePicker, DatePicker, and DateRangePicker examples (DocsPageSection and associated razor file) that just show the default behavior
  2. private bool _modal = false; should be private bool _modal; because false is the default value and we don't need to specify that.

@mudbot mudbot bot added the needs: changes A maintainer has asked for further modifications to be made to this pull request label Nov 12, 2025
Copy link
Contributor Author

Copilot AI commented Nov 12, 2025

@copilot

  1. Remove the ColorPicker, TimePicker, DatePicker, and DateRangePicker examples (DocsPageSection and associated razor file) that just show the default behavior
    ...

Done in commit d47a4a4:

  1. Removed the "Inline Non-modal Mode" sections and associated example files from ColorPicker, TimePicker, DatePicker, and DateRangePicker pages
  2. Changed private bool _modal = false; to private bool _modal; in AutocompletePlaygroundExample and SelectPlaygroundExample

@mudbot mudbot bot removed the needs: changes A maintainer has asked for further modifications to be made to this pull request label Nov 12, 2025
@danielchalmers danielchalmers added the enhancement Adds a new feature or enhances existing functionality (not fixing a defect) in the main library label Nov 12, 2025
@danielchalmers danielchalmers marked this pull request as ready for review November 22, 2025 16:33
@danielchalmers danielchalmers added the breaking change This change will require consumer code updates label Nov 22, 2025
versile2
versile2 requested changes Nov 23, 2025
View reviewed changes
Copy link
Contributor

@versile2 versile2 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good apart from that

@danielchalmers danielchalmers merged commit 122e52d into dev Nov 23, 2025
3 of 4 checks passed
@danielchalmers danielchalmers changed the title Make overlay popovers non-modal by default Popovers: Make overlay popovers non-modal by default Dec 20, 2025
@ScarletKuro ScarletKuro deleted the copilot/make-overlay-popovers-non-modal branch January 26, 2026 07:07
@versile2 versile2 mentioned this pull request Feb 12, 2026
Open
9 tasks
This was referenced Feb 20, 2026
Merged
Closed
Open
Closed
Open
This was referenced Feb 23, 2026
Open
Open
Open
Open
Open
Open
Open
Open
Open
Open
Closed
Merged
Closed
Open
Closed
Closed
Closed
Merged
Closed
Closed
Merged
Closed
Closed
Open
Closed
Open
Closed
Open
Open
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@versile2 versile2 versile2 requested changes

@danielchalmers danielchalmers Awaiting requested review from danielchalmers danielchalmers is a code owner

Assignees

@danielchalmers danielchalmers

Copilot code review Copilot

Labels

breaking change This change will require consumer code updates enhancement Adds a new feature or enhances existing functionality (not fixing a defect) in the main library

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Make overlay popovers non-modal by default

3 participants

@danielchalmers @versile2