Display the select option's text instead of value in telepath (#7629)

CHANGELOG.txt

@@ -40,6 +40,7 @@ Changelog
  * Implemented the `wagtail_site` template tag for Jinja2 (Vladimir Tananko)
  * Change webmaster to website administrator in the admin (Naomi Morduch Toubman)
  * Added documentation for creating custom submenus in the admin menu (Sævar Öfjörð Magnússon)
+ * Choice blocks in StreamField now show label rather than value when collapsed (Jérôme Lebleu)
  * Fix: Accessibility fixes for Windows high contrast mode; Dashboard icons colour and contrast, help/error/warning blocks for fields and general content, side comment buttons within the page editor, dropdown buttons (Sakshi Uppoor, Shariq Jamil, LB (Ben Johnston), Jason Attwood)
  * Fix: Rename additional 'spin' CSS animations to avoid clashes with other libraries (Kevin Gutiérrez)
  * Fix: `default_app_config` deprecations for Django >= 3.2 (Tibor Leupold)

client/src/entrypoints/admin/telepath/__snapshots__/widgets.test.js.snap

@@ -92,3 +92,10 @@ exports[`telepath: wagtail.widgets.RadioSelect it renders correctly 1`] = `
           </li>
         </ul>"
 `;
+
+exports[`telepath: wagtail.widgets.Select it renders correctly 1`] = `
+"<select name=\\"the-name\\" id=\\"the-id\\">
+          <option value=\\"1\\">Option 1</option>
+          <option value=\\"2\\">Option 2</option>
+        </select>"
+`;

client/src/entrypoints/admin/telepath/widgets.js

@@ -100,6 +100,18 @@ class RadioSelect extends Widget {
 window.telepath.register('wagtail.widgets.RadioSelect', RadioSelect);
 
 
+class BoundSelect extends BoundWidget {
+    getTextLabel() {
+      return this.input.find(':selected').text();
+    }
+}
+
+class Select extends Widget {
+    boundWidgetClass = BoundSelect;
+}
+window.telepath.register('wagtail.widgets.Select', Select);
+
+
 class PageChooser {
     constructor(html, idPattern, config) {
         this.html = html;

client/src/entrypoints/admin/telepath/widgets.test.js

@@ -152,6 +152,38 @@ describe('telepath: wagtail.widgets.CheckboxInput', () => {
   });
 });
 
+describe('telepath: wagtail.widgets.Select', () => {
+  let boundWidget;
+
+  beforeEach(() => {
+    // Create a placeholder to render the widget
+    document.body.innerHTML = '<div id="placeholder"></div>';
+
+    // Unpack and render a radio select widget
+    const widgetDef = window.telepath.unpack({
+      _type: 'wagtail.widgets.Select',
+      _args: [
+        `<select name="__NAME__" id="__ID__">
+          <option value="1">Option 1</option>
+          <option value="2">Option 2</option>
+        </select>`,
+        '__ID__'
+      ]
+    });
+    boundWidget = widgetDef.render($('#placeholder'), 'the-name', 'the-id', '1');
+  });
+
+  test('it renders correctly', () => {
+    expect(document.body.innerHTML).toMatchSnapshot();
+    const select = document.querySelector('select');
+    expect(select.options[select.selectedIndex].value).toBe('1');
+  });
+
+  test('getTextLabel() returns the text of selected option', () => {
+    expect(boundWidget.getTextLabel()).toBe('Option 1');
+  });
+});
+
 describe('telepath: wagtail.widgets.PageChooser', () => {
   let boundWidget;
 

docs/releases/2.16.md

@@ -46,6 +46,7 @@ As part of a [wider redesign](https://github.com/wagtail/wagtail/discussions/773
  * Implemented the `wagtail_site` template tag for Jinja2 (Vladimir Tananko)
  * Change webmaster to website administrator in the admin (Naomi Morduch Toubman)
  * Added documentation for creating custom submenus in the admin menu (Sævar Öfjörð Magnússon)
+ * Choice blocks in StreamField now show label rather than value when collapsed (Jérôme Lebleu)
 
 ### Bug fixes
 

wagtail/core/widget_adapters.py

@@ -34,7 +34,6 @@ class WidgetAdapter(Adapter):
 
 register(WidgetAdapter(), forms.widgets.Input)
 register(WidgetAdapter(), forms.Textarea)
-register(WidgetAdapter(), forms.Select)
 register(WidgetAdapter(), forms.CheckboxSelectMultiple)
 
 
@@ -52,6 +51,13 @@ class RadioSelectAdapter(WidgetAdapter):
 register(RadioSelectAdapter(), forms.RadioSelect)
 
 
+class SelectAdapter(WidgetAdapter):
+    js_constructor = 'wagtail.widgets.Select'
+
+
+register(SelectAdapter(), forms.Select)
+
+
 class ValidationErrorAdapter(Adapter):
     js_constructor = 'wagtail.errors.ValidationError'