@plone/volto 19.4.0 → 19.4.1

package/CHANGELOG.md

@@ -17,6 +17,12 @@ myst:
 
 <!-- towncrier release notes start -->
 
+## 19.4.1 (2026-09-10)
+
+### Bugfix
+
+- Fix `SelectAutoComplete` rendering the raw token instead of its title when the vocabulary subrequest still held a stale token/title pair from a previously edited value (for example after changing a value, saving, and editing again via client-side navigation). The widget now keeps its local token/title cache in sync with the incoming choices instead of seeding it only once. @sneridagh [#8423](https://github.com/plone/volto/issues/8423)
+
 ## 19.4.0 (2026-09-03)
 
 ### Feature

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "19.4.0",
+  "version": "19.4.1",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"
@@ -175,9 +175,9 @@
     "url": "^0.11.3",
     "use-deep-compare-effect": "1.8.1",
     "uuid": "^14.0.0",
-    "@plone/registry": "3.0.1",
-    "@plone/scripts": "4.0.1",
     "@plone/components": "4.2.1",
+    "@plone/registry": "3.0.2",
+    "@plone/scripts": "4.0.1",
     "@plone/volto-slate": "19.0.5"
   },
   "devDependencies": {
@@ -286,10 +286,10 @@
     "webpack-bundle-analyzer": "4.10.1",
     "webpack-dev-server": "^5.2.4",
     "webpack-node-externals": "3.0.0",
-    "@plone/babel-preset-razzle": "^1.0.1",
     "@plone/razzle": "1.0.1",
-    "@plone/razzle-dev-utils": "1.0.0",
+    "@plone/babel-preset-razzle": "^1.0.1",
     "@plone/volto-coresandbox": "1.0.0",
+    "@plone/razzle-dev-utils": "1.0.0",
     "@plone/types": "2.0.1"
   },
   "scripts": {

package/src/components/manage/Widgets/SelectAutoComplete.jsx

@@ -148,14 +148,33 @@ class SelectAutoComplete extends Component {
 
   componentDidUpdate(prevProps, prevState) {
     const { value, choices } = this.props;
-    if (
-      this.state.termsPairsCache.length === 0 &&
-      value?.length > 0 &&
-      choices?.length > 0
-    ) {
-      this.setState((state) => ({
-        termsPairsCache: [...state.termsPairsCache, ...choices],
-      }));
+    // Keep the local token/title cache in sync with the incoming vocabulary
+    // choices. Seeding the cache only once (when it was still empty) locked it
+    // to whatever choices happened to be present first. When the vocabulary
+    // subrequest still held a stale token/title pair from a previously edited
+    // value (its cache persists across client-side navigation), the widget kept
+    // rendering the raw token instead of its title after the value was changed
+    // and saved. Merging fresh choices as they arrive (de-duplicated, and
+    // preserving options the user picked) resolves the current value's label as
+    // soon as it is fetched.
+    const choicesChanged = choices !== prevProps.choices;
+    const cacheEmptyWithValue =
+      this.state.termsPairsCache.length === 0 && value?.length > 0;
+    if (choices?.length > 0 && (choicesChanged || cacheEmptyWithValue)) {
+      this.setState((state) => {
+        const normalizedIncoming = normalizeChoices(choices, this.props.intl);
+        const knownValues = new Set(
+          normalizeChoices(state.termsPairsCache, this.props.intl).map(
+            (pair) => pair.value,
+          ),
+        );
+        const additions = choices.filter(
+          (choice, index) => !knownValues.has(normalizedIncoming[index].value),
+        );
+        return additions.length > 0
+          ? { termsPairsCache: [...state.termsPairsCache, ...additions] }
+          : null;
+      });
     }
   }
 

package/src/components/manage/Widgets/SelectAutoComplete.test.jsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import configureStore from 'redux-mock-store';
+import { createStore, combineReducers } from 'redux';
 import { Provider } from 'react-intl-redux';
-import { waitFor, render, screen } from '@testing-library/react';
+import { act, waitFor, render, screen } from '@testing-library/react';
+import vocabularies from '@plone/volto/reducers/vocabularies/vocabularies';
 import SelectAutoComplete from './SelectAutoComplete';
 
 const mockStore = configureStore();
@@ -60,3 +62,64 @@ test('renders a select widget component', async () => {
   await waitFor(() => screen.getByText('My field'));
   expect(container).toMatchSnapshot();
 });
+
+const VOCAB = 'plone.app.vocabularies.Keywords';
+
+function tokenTitleSuccess(token, title) {
+  return {
+    type: 'GET_VOCABULARY_TOKEN_TITLE_SUCCESS',
+    vocabulary: VOCAB,
+    tokens: [token],
+    subrequest: 'widget-responsible-en',
+    result: { items: [{ token, title }] },
+  };
+}
+
+test('resolves the current value label from fresh vocabulary choices even when a stale token/title pair was cached first', async () => {
+  // A real store (not a mock) so that dispatching keeps the same widget
+  // instance mounted while its `choices` change — this is what reproduces the
+  // stale vocabulary cache surviving across a client-side navigation.
+  const intl = (state = { locale: 'en', messages: {} }) => state;
+  const store = createStore(combineReducers({ intl, vocabularies }));
+
+  // The vocabulary subrequest still holds a stale pair left by a previously
+  // edited value; it does not contain the current value ("anna").
+  store.dispatch(tokenTitleSuccess('max', 'Max Berger'));
+
+  render(
+    <Provider store={store}>
+      <SelectAutoComplete
+        widgetOptions={{ vocabulary: { '@id': VOCAB } }}
+        id="responsible"
+        title="Responsible"
+        fieldSet="default"
+        isMulti={false}
+        value="anna"
+        onChange={() => {}}
+        onBlur={() => {}}
+        onClick={() => {}}
+      />
+    </Provider>,
+  );
+
+  // With only the stale pair cached, the raw token is shown at first.
+  await waitFor(() => screen.getByText('anna'));
+
+  // A refresh of the vocabulary subrequest that still resolves the stale pair
+  // makes the widget seed its local cache from those stale choices — this is
+  // the state that used to lock the widget to the wrong label.
+  act(() => {
+    store.dispatch(tokenTitleSuccess('max', 'Max Berger'));
+  });
+  await waitFor(() => screen.getByText('anna'));
+
+  // The choices for the current value finally arrive (same mounted instance).
+  // The widget must pick up the fresh pair and render its title instead of
+  // staying locked to the stale cache it seeded earlier.
+  act(() => {
+    store.dispatch(tokenTitleSuccess('anna', 'Anna Becker'));
+  });
+
+  await waitFor(() => screen.getByText('Anna Becker'));
+  expect(screen.queryByText('anna')).not.toBeInTheDocument();
+});