Migrate jQuery 'select all on focus' in Image URL generator to Stimulus

Adds support of this useful shared functionality in the ActionController
Fixes #11031

CHANGELOG.txt

@@ -98,6 +98,7 @@ Changelog
  * Maintenance: Add changelog and issue tracker links to the PyPI project page (Panagiotis H.M. Issaris)
  * Maintenance: Add better deprecation warnings to the `search.Query` & `search.QueryDailyHits` model, move final set of templates from the admin search module to the search promotions contrib module (LB (Ben) Johnston)
  * Maintenance: Add generic `InspectView` to `ModelViewSet` (Sage Abdullah)
+ * Maintenance: Migrate select all on focus/click behavior to Stimulus, used on the image URL generator (Chiemezuo Akujobi)
 
 5.1.3 (xx.xx.20xx) - IN DEVELOPMENT
 ~~~~~~~~~~~~~~~~~~

CONTRIBUTORS.md

@@ -743,6 +743,7 @@
 * Panagiotis H.M. Issaris
 * Damilola Oladele
 * Olumide Micheal
+* Chiemezuo Akujobi
 
 ## Translators
 

client/src/controllers/ActionController.test.js

@@ -169,4 +169,34 @@ describe('ActionController', () => {
       expect(window.location.assign).not.toHaveBeenCalled();
     });
   });
+
+  describe('select method', () => {
+    beforeEach(async () => {
+      await setup(`
+        <textarea
+          id="text"
+          rows="1"
+          data-controller="w-action"
+          data-action="focus->w-action#select"
+        >
+          some random text
+        </textarea>
+      `);
+    });
+
+    it('select should be called when you click on text in textarea', () => {
+      const textarea = document.getElementById('text');
+
+      // check that there is no selection initially
+      expect(textarea.selectionStart).toBe(0);
+      expect(textarea.selectionEnd).toBe(0);
+
+      // focus
+      textarea.focus();
+
+      // check that there is a selection after focus
+      expect(textarea.selectionStart).toBe(0);
+      expect(textarea.selectionEnd).toBe(textarea.value.length);
+    });
+  });
 });

client/src/controllers/ActionController.ts

@@ -34,9 +34,16 @@ import { WAGTAIL_CONFIG } from '../config/wagtailConfig';
  *     <option value="/path/to/2">2</option>
  *   </select>
  * </form>
+ *
+ * @example - triggering selection of the text in a field
+ * <form>
+ *   <textarea name="url" data-controller="w-action" data-action="click->w-action#select">
+ *     This text will all be selected on focus.
+ *   </textarea>
+ * </form>
  */
 export class ActionController extends Controller<
-  HTMLButtonElement | HTMLInputElement
+  HTMLButtonElement | HTMLInputElement | HTMLTextAreaElement
 > {
   static values = {
     continue: { type: Boolean, default: false },
@@ -91,4 +98,12 @@ export class ActionController extends Controller<
     if (!url) return;
     window.location.assign(url);
   }
+
+  /**
+   * Select all the text in an input or textarea element.
+   */
+  select() {
+    if (this.element instanceof HTMLButtonElement) return;
+    this.element?.select();
+  }
 }

docs/releases/5.2.md

@@ -121,6 +121,7 @@ depth: 1
  * Add changelog and issue tracker links to the PyPI project page (Panagiotis H.M. Issaris)
  * Add better deprecation warnings to the `search.Query` & `search.QueryDailyHits` model, move final set of templates from the admin search module to the search promotions contrib module (LB (Ben) Johnston)
  * Add generic `InspectView` to `ModelViewSet` (Sage Abdullah)
+ * Migrate select all on focus/click behavior to Stimulus, used on the image URL generator (Chiemezuo Akujobi)
 
 
 ## Upgrade considerations - changes affecting all projects

wagtail/images/static_src/wagtailimages/js/image-url-generator.js

@@ -79,10 +79,5 @@ $(function () {
     $form.on('change', $.debounce(500, formChangeHandler));
     $form.on('keyup', $.debounce(500, formChangeHandler));
     formChangeHandler();
-
-    // When the user clicks the URL, automatically select the whole thing (for easier copying)
-    $result.on('click', function () {
-      $(this).trigger('select');
-    });
   });
 });

wagtail/images/templates/wagtailimages/images/url_generator.html

@@ -19,7 +19,7 @@
 
         {% trans "URL" as heading %}
         {% panel id="url" icon="link" heading=heading %}
-            <textarea id="result-url" rows="1"></textarea>
+            <textarea id="result-url" rows="1" data-controller="w-action" data-action="focus->w-action#select"></textarea>
         {% endpanel %}
 
         {% trans "Preview" as heading %}