Merge pull request #1192 from City-of-Helsinki/HDS-2039-Investigate-w…

…hy-icons-in-the-language-button-interact-different-ways HDS-2039 - Fix language menu icon click issue
City-of-Helsinki · Jan 4, 2024 · 04d8aaa · 04d8aaa
2 parents c13d2ac + 0834130
commit 04d8aaa
Show file tree

Hide file tree

Showing 17 changed files with 8 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -24,6 +24,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 #### Fixed
 
 - [Dropdown] Clearing values from disabled Dropdowns is prohibited
+- [Header.ActionBarItem] Fix click event handling issue in icons
 
 ### Core
 

diff --git a/...eference/chrome_iphone7_Components_Container_Aligns_Wit_Custom_Width_Header.png b/...eference/chrome_iphone7_Components_Container_Aligns_Wit_Custom_Width_Header.png
diff --git a/packages/react/.loki/reference/chrome_iphone7_Components_Footer_Custom_Section.png b/packages/react/.loki/reference/chrome_iphone7_Components_Footer_Custom_Section.png
diff --git a/packages/react/.loki/reference/chrome_iphone7_Components_Footer_Custom_theme.png b/packages/react/.loki/reference/chrome_iphone7_Components_Footer_Custom_theme.png
diff --git a/packages/react/.loki/reference/chrome_iphone7_Components_Footer_Example.png b/packages/react/.loki/reference/chrome_iphone7_Components_Footer_Example.png
diff --git a/packages/react/.loki/reference/chrome_iphone7_Components_Footer_No_navigation.png b/packages/react/.loki/reference/chrome_iphone7_Components_Footer_No_navigation.png
diff --git a/packages/react/.loki/reference/chrome_iphone7_Components_Footer_Sitemap.png b/packages/react/.loki/reference/chrome_iphone7_Components_Footer_Sitemap.png
diff --git a/packages/react/.loki/reference/chrome_iphone7_Components_Footer_Utility_Groups.png b/packages/react/.loki/reference/chrome_iphone7_Components_Footer_Utility_Groups.png
diff --git a/packages/react/.loki/reference/chrome_laptop_Components_Footer_Custom_Section.png b/packages/react/.loki/reference/chrome_laptop_Components_Footer_Custom_Section.png
diff --git a/packages/react/.loki/reference/chrome_laptop_Components_Footer_Custom_theme.png b/packages/react/.loki/reference/chrome_laptop_Components_Footer_Custom_theme.png
diff --git a/packages/react/.loki/reference/chrome_laptop_Components_Footer_Example.png b/packages/react/.loki/reference/chrome_laptop_Components_Footer_Example.png
diff --git a/packages/react/.loki/reference/chrome_laptop_Components_Footer_No_navigation.png b/packages/react/.loki/reference/chrome_laptop_Components_Footer_No_navigation.png
diff --git a/packages/react/.loki/reference/chrome_laptop_Components_Footer_Sitemap.png b/packages/react/.loki/reference/chrome_laptop_Components_Footer_Sitemap.png
diff --git a/packages/react/.loki/reference/chrome_laptop_Components_Footer_Utility_Groups.png b/packages/react/.loki/reference/chrome_laptop_Components_Footer_Utility_Groups.png
diff --git a/packages/react/src/components/footer/__snapshots__/Footer.test.tsx.snap b/packages/react/src/components/footer/__snapshots__/Footer.test.tsx.snap
@@ -76,7 +76,7 @@ exports[`<Footer /> spec renders the component 1`] = `
             <span
               class="copyrightHolder"
             >
-              © Copyright 2023
+              © Copyright 2024
             </span>
             <span
               class="copyrightDot"

diff --git a/...eact/src/components/header/components/headerActionBarItem/HeaderActionBarItem.module.scss b/...eact/src/components/header/components/headerActionBarItem/HeaderActionBarItem.module.scss
@@ -23,6 +23,7 @@ button.actionBarItem {
   margin: 0 auto;
   padding: 3px 0 0;
   width: var(--icon-size);
+  pointer-events: none;
 
   & > svg {
     display: block;
@@ -37,6 +38,7 @@ button.actionBarItem {
   font-size: var(--action-bar-item-title-font-size);
   margin: 0 auto;
   white-space: nowrap;
+  pointer-events: none;
 
   & > svg {
     display: block;

diff --git a/.../src/components/header/components/headerActionBarItem/HeaderActionBarItemWithDropdown.tsx b/.../src/components/header/components/headerActionBarItem/HeaderActionBarItemWithDropdown.tsx
@@ -87,6 +87,7 @@ export const HeaderActionBarItemWithDropdown = (properties: HeaderActionBarItemW
   };
 
   const handleDocumentClick = (event) => {
+    if (!visible) return;
     const container = getContainer();
     const eventTargetNode = event.target;
     if (!container.contains(eventTargetNode)) {
@@ -95,18 +96,18 @@ export const HeaderActionBarItemWithDropdown = (properties: HeaderActionBarItemW
   };
 
   const handleBlur = (event) => {
+    if (!visible) return;
     const container = getContainer();
     const eventTargetNode = event.relatedTarget;
     if (!container.contains(eventTargetNode)) {
       setDisplayProperty(false);
     }
   };
 
-  // Set event listener only when dropdown open
   useEffect(() => {
-    if (visible) document.addEventListener('click', handleDocumentClick);
+    document.addEventListener('click', handleDocumentClick);
     return () => document.removeEventListener('click', handleDocumentClick);
-  }, [containerElementRef.current, visible]);
+  }, [containerElementRef.current]);
 
   // Hide the component if there is no content
   useEffect(() => {