From 2eeb1896388fd53843b1e36b8527f1c088885f6d Mon Sep 17 00:00:00 2001
From: Jake Dallimore <jake@moodle.com>
Date: Tue, 5 Jun 2018 13:00:30 +0800
Subject: [PATCH] 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                               |  5 +++-
 lib/form/url.php                              | 24 ++++++++++++++++++-
 .../templates/core_form/element-url.mustache  |  6 +++++
 3 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/lib/form/url.js b/lib/form/url.js
index c85326a1a67..d1b793dbd30 100644
--- a/lib/form/url.js
+++ b/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();
 };
diff --git a/lib/form/url.php b/lib/form/url.php
index c114298e31a..fffdfccd70b 100644
--- a/lib/form/url.php
+++ b/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;
+    }
 }
diff --git a/theme/boost/templates/core_form/element-url.mustache b/theme/boost/templates/core_form/element-url.mustache
index 8bce68d22b4..ebd64bc50ae 100644
--- a/theme/boost/templates/core_form/element-url.mustache
+++ b/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}}