diff --git a/src/wwwroot/NavigationObserver.js b/src/wwwroot/NavigationObserver.js index de5d441..77ff18a 100644 --- a/src/wwwroot/NavigationObserver.js +++ b/src/wwwroot/NavigationObserver.js @@ -52,6 +52,9 @@ let hasInitialized = false; if (responsiveDrawer) { MudDrawerInterop.monitorResize(responsiveDrawer); } + + document.removeEventListener('click', this.handleOutsideClick); + document.addEventListener('click', this.handleOutsideClick); }, monitorResize(responsiveDrawer) { @@ -108,6 +111,19 @@ let hasInitialized = false; MudDrawerInterop.toggleDrawer(targetDrawerId); }, + handleOutsideClick: function (event) { + const mudDrawer = document.querySelector('.mud-drawer.mud-drawer--open'); + + if (!mudDrawer) return; + + if (mudDrawer.contains(event.target) || event.target.closest('[data-mud-drawer-toggle]')) { + return; + } + + const drawerId = mudDrawer.id ? mudDrawer.id : '_no_id_provided_'; + MudDrawerInterop.toggleDrawer(drawerId); + }, + toggleDrawer: function (drawerId) { let mudDrawer; diff --git a/tests/StaticInput.UnitTests.Viewer/Components/Tests/NavMenu/NavMenuDrawerToggleNeverTest.razor b/tests/StaticInput.UnitTests.Viewer/Components/Tests/NavMenu/NavMenuDrawerToggleNeverTest.razor new file mode 100644 index 0000000..54266a1 --- /dev/null +++ b/tests/StaticInput.UnitTests.Viewer/Components/Tests/NavMenu/NavMenuDrawerToggleNeverTest.razor @@ -0,0 +1,24 @@ + + + + + + + + Temporary + + + Store + Library + Community + + + + + Text inside MudContainer + + + \ No newline at end of file diff --git a/tests/StaticInput.UnitTests/Components/NavMenuTests.cs b/tests/StaticInput.UnitTests/Components/NavMenuTests.cs index 0292418..fe3ea6c 100644 --- a/tests/StaticInput.UnitTests/Components/NavMenuTests.cs +++ b/tests/StaticInput.UnitTests/Components/NavMenuTests.cs @@ -79,5 +79,39 @@ public async Task Toggle_MudDrawer() miniClasses = await miniDawer.GetAttributeAsync("class"); miniClasses.Should().Contain("mud-drawer--closed"); } + + [Fact] + public async Task MudDrawerTemporary_ClickOutside_Closed() + { + var url = typeof(NavMenuDrawerToggleNeverTest).ToQueryString(); + await Page.GotoAsync(url); + + var leftToggle = Page.Locator("#static-left-toggle"); + var temporaryDrawer = Page.Locator("#static-temporary"); + + var drawerBox = await temporaryDrawer.BoundingBoxAsync(); + drawerBox.Should().NotBeNull(); + + var temporaryClasses = await temporaryDrawer.GetAttributeAsync("class"); + temporaryClasses.Should().NotBeNullOrEmpty(); + temporaryClasses.Should().Contain("mud-drawer--closed"); + + await leftToggle.ClickAsync(); + temporaryClasses = await temporaryDrawer.GetAttributeAsync("class"); + temporaryClasses.Should().Contain("mud-drawer--open"); + + await temporaryDrawer.ClickAsync(); + temporaryClasses = await temporaryDrawer.GetAttributeAsync("class"); + temporaryClasses.Should().Contain("mud-drawer--open"); + + await Page.Mouse.ClickAsync(drawerBox!.Width+100, 10); + + temporaryClasses = await temporaryDrawer.GetAttributeAsync("class"); + temporaryClasses.Should().Contain("mud-drawer--closed"); + + await leftToggle.ClickAsync(); + temporaryClasses = await temporaryDrawer.GetAttributeAsync("class"); + temporaryClasses.Should().Contain("mud-drawer--open"); + } } }