Merge pull request #5800 from matuzalemsteles/LPD-20600

fix(@clayui/navigation-bar): fixes navbar size bug when resizing
liferay · Apr 9, 2024 · a198771 · a198771
2 parents 661de58 + 84ea1a2
commit a198771
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/packages/clay-navigation-bar/src/__tests__/__snapshots__/index.tsx.snap b/packages/clay-navigation-bar/src/__tests__/__snapshots__/index.tsx.snap
@@ -3,7 +3,7 @@
 exports[`ClayNavigationBar collapses the previously expanded dropdown when trigger element is clicked 1`] = `
 <div
   class="navbar-collapse collapse"
-  style="height: 0px"
+  style="height: auto"
 >
   <div
     class="container-fluid container-fluid-max-xl"
@@ -191,7 +191,7 @@ exports[`ClayNavigationBar renders a custom item 1`] = `
 exports[`ClayNavigationBar renders a dropdown when clicking the trigger element from NavigationBar 1`] = `
 <div
   class="navbar-collapse show"
-  style="height: 0px"
+  style="height: auto"
 >
   <div
     class="container-fluid container-fluid-max-xl"

diff --git a/packages/clay-navigation-bar/src/index.tsx b/packages/clay-navigation-bar/src/index.tsx
@@ -137,10 +137,16 @@ function ClayNavigationBar({
 						onEnter={(element: HTMLElement) =>
 							element.setAttribute('style', `height: 0px`)
 						}
+						onEntered={(element: HTMLElement) =>
+							element.setAttribute('style', `height: auto`)
+						}
 						onEntering={(element: HTMLElement) =>
 							setElementFullHeight(element)
 						}
 						onExit={(element) => setElementFullHeight(element)}
+						onExited={(element) =>
+							element.setAttribute('style', `height: auto`)
+						}
 						onExiting={(element) =>
 							element.setAttribute('style', `height: 0px`)
 						}