MDL-52318 core_form: allow multiple filepicker-enabled url elements

In cases when filepicker support is enabled, this patch adds a wrapper
div around the url element and includes the filepicker id in its id.
This allows the js callback code to target the specific input field
with which it is associated.

lib/form/url.js

@@ -12,5 +12,8 @@ M.form_url.init = function(Y, options) {
 };
 
 M.form_url.callback = function (params) {
-    document.getElementById('id_externalurl').value = params.url;
+    // Get the first child of type 'input' within the wrapper div associated with the filepicker's id.
+    var urlElement = document.getElementById('url-wrapper-' + params.client_id).getElementsByTagName('input')[0];
+    urlElement.value = params.url;
+    urlElement.focus();
 };

lib/form/url.php

@@ -48,6 +48,9 @@ class MoodleQuickForm_url extends HTML_QuickForm_text implements templatable {
     /** @var bool if true label will be hidden */
     var $_hiddenLabel=false;
 
+    /** @var string the unique id of the filepicker, if enabled.*/
+    protected $filepickeruniqueid;
+
     /**
      * Constructor
      *
@@ -122,6 +125,7 @@ class MoodleQuickForm_url extends HTML_QuickForm_text implements templatable {
 
         // Print out file picker.
         $str .= $this->getFilePickerHTML();
+        $str = '<div id="url-wrapper-' . $this->get_filepicker_unique_id() . '">' . $str . '</div>';
 
         return $str;
     }
@@ -130,7 +134,7 @@ class MoodleQuickForm_url extends HTML_QuickForm_text implements templatable {
         global $PAGE, $OUTPUT;
 
         $str = '';
-        $clientid = uniqid();
+        $clientid = $this->get_filepicker_unique_id();
 
         $args = new stdClass();
         $args->accepted_types = '*';
@@ -186,6 +190,13 @@ EOD;
     public function export_for_template(renderer_base $output) {
         $context = $this->export_for_template_base($output);
         $context['filepickerhtml'] = !empty($this->_options['usefilepicker']) ? $this->getFilePickerHTML() : '';
+
+        // This will conditionally wrap the element in a div which can be accessed in the DOM using the unique id,
+        // and allows the filepicker callback to find its respective url field, if multiple URLs are used.
+        if ($this->_options['usefilepicker']) {
+            $context['filepickerclientid'] = $this->get_filepicker_unique_id();
+        }
+
         return $context;
     }
 
@@ -198,4 +209,15 @@ EOD;
         return true;
     }
 
+    /**
+     * Returns the unique id of the file picker associated with this url element, setting it in the process if not set.
+     *
+     * @return string the unique id of the file picker.
+     */
+    protected function get_filepicker_unique_id() : string {
+        if (empty($this->filepickeruniqueid)) {
+            $this->filepickeruniqueid = uniqid();
+        }
+        return $this->filepickeruniqueid;
+    }
 }

theme/boost/templates/core_form/element-url.mustache

@@ -1,5 +1,8 @@
 {{< core_form/element-template }}
     {{$element}}
+        {{#element.filepickerclientid}}
+            <div id="url-wrapper-{{element.filepickerclientid}}" class="d-inline-block">
+        {{/element.filepickerclientid}}
         <input type="url"
                 class="form-control {{#error}}form-control-danger{{/error}}"
                 name="{{element.name}}"
@@ -13,6 +16,9 @@
                     readonly {{#element.hardfrozen}}disabled{{/element.hardfrozen}}
                 {{/element.frozen}}
                 {{{element.attributes}}} >
+        {{#element.filepickerclientid}}
+            </div>
+        {{/element.filepickerclientid}}
         {{^element.frozen}}
             {{{element.filepickerhtml}}}
         {{/element.frozen}}