@plone/volto 19.1.3 → 19.1.4

package/CHANGELOG.md

@@ -17,6 +17,12 @@ myst:
 
 <!-- towncrier release notes start -->
 
+## 19.1.4 (2026-06-11)
+
+### Bugfix
+
+- Fixed the Babel compare language toolbar button closing immediately after user clicks by treating the trigger and popup as one outside-click boundary. @sneridagh [#8323](https://github.com/plone/volto/issues/8323)
+
 ## 19.1.3 (2026-06-09)
 
 ### Bugfix

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "19.1.3",
+  "version": "19.1.4",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"
@@ -177,9 +177,9 @@
     "url": "^0.11.3",
     "use-deep-compare-effect": "1.8.1",
     "uuid": "^14.0.0",
-    "@plone/volto-slate": "19.0.2",
     "@plone/registry": "3.0.1",
     "@plone/components": "4.2.0",
+    "@plone/volto-slate": "19.0.2",
     "@plone/scripts": "4.0.1"
   },
   "devDependencies": {
@@ -290,8 +290,8 @@
     "webpack-node-externals": "3.0.0",
     "@plone/babel-preset-razzle": "^1.0.1",
     "@plone/razzle": "1.0.0",
-    "@plone/types": "2.0.0",
     "@plone/razzle-dev-utils": "1.0.0",
+    "@plone/types": "2.0.0",
     "@plone/volto-coresandbox": "1.0.0"
   },
   "scripts": {

package/src/components/manage/Multilingual/CompareLanguages.jsx

@@ -28,19 +28,9 @@ const CompareLanguagesMenu = ({
 }) => {
   const intl = useIntl();
 
-  const ClickOutsideListener = () => {
-    closeMenu();
-  };
-
-  const ref = useDetectClickOutside({
-    onTriggered: ClickOutsideListener,
-    triggerKeys: ['Escape'],
-  });
-
   return (
     <div
       className="toolbar-content show compare-languages"
-      ref={ref}
       style={{
         flex: theToolbar.current
           ? `0 0 ${theToolbar.current.getBoundingClientRect().width}px`
@@ -106,6 +96,10 @@ const CompareLanguages = React.forwardRef((props, ref) => {
   const intl = useIntl();
   const [viewMenu, setViewMenu] = useState(false);
   const translations = content?.['@components']?.translations?.items || [];
+  const compareLanguagesRef = useDetectClickOutside({
+    onTriggered: () => setViewMenu(false),
+    triggerKeys: ['Escape'],
+  });
 
   const translationsObject = {};
   translations.forEach((t) => {
@@ -114,19 +108,27 @@ const CompareLanguages = React.forwardRef((props, ref) => {
 
   if (translations.length > 0) {
     return (
-      <div className="toolbar-compare-translations-wrapper">
+      <div
+        className="toolbar-compare-translations-wrapper"
+        ref={compareLanguagesRef}
+      >
         <div className="toolbar-button-spacer" />
 
         <Button
+          type="button"
           aria-label={intl.formatMessage(messages.compare_to)}
           title={intl.formatMessage(messages.compare_to)}
           onClick={() => {
-            setViewMenu(!viewMenu);
+            setViewMenu((viewMenu) => !viewMenu);
           }}
           id="toolbar-compare-translations"
           className="toolbar-button-compare-translations"
         >
-          <Icon className="mobile hidden" name={translateSVG} size="30px" />
+          <Icon
+            className="mobile hidden"
+            name={viewMenu ? clearSVG : translateSVG}
+            size="30px"
+          />
           {viewMenu ? (
             <Icon className="mobile only" name={clearSVG} size="30px" />
           ) : (

package/theme/themes/pastanaga/extras/toolbar.less

@@ -714,8 +714,16 @@ body:not(.has-sidebar):not(.has-sidebar-collapsed) {
   .toolbar-compare-translations-wrapper {
     position: relative;
 
-    .toolbar-button-compare-translations .icon {
-      padding: 4px;
+    .toolbar-button-compare-translations {
+      display: flex;
+      width: 42px;
+      height: 42px;
+      align-items: center;
+      justify-content: center;
+
+      .icon {
+        padding: 4px;
+      }
     }
 
     .compare-languages {