Merge branch 'MDL-62848-34-placeholderwidth' of git://github.com/mudrd8mz/moodle into MOODLE_34_STABLE

lib/amd/src/form-autocomplete.js

@@ -876,9 +876,23 @@ define(['jquery', 'core/log', 'core/str', 'core/templates', 'core/notification']
             context.options = suggestions;
             context.items = [];
 
-            var renderInput = templates.render('core/form_autocomplete_input', context);
-            var renderDatalist = templates.render('core/form_autocomplete_suggestions', context);
-            var renderSelection = templates.render('core/form_autocomplete_selection', context);
+            // Collect rendered inline JS to be executed once the HTML is shown.
+            var collectedjs = '';
+
+            var renderInput = templates.render('core/form_autocomplete_input', context).then(function(html, js) {
+                collectedjs += js;
+                return html;
+            });
+
+            var renderDatalist = templates.render('core/form_autocomplete_suggestions', context).then(function(html, js) {
+                collectedjs += js;
+                return html;
+            });
+
+            var renderSelection = templates.render('core/form_autocomplete_selection', context).then(function(html, js) {
+                collectedjs += js;
+                return html;
+            });
 
             return $.when(renderInput, renderDatalist, renderSelection).then(function(input, suggestions, selection) {
                 originalSelect.hide();
@@ -886,6 +900,8 @@ define(['jquery', 'core/log', 'core/str', 'core/templates', 'core/notification']
                 originalSelect.after(input);
                 originalSelect.after(selection);
 
+                templates.runTemplateJS(collectedjs);
+
                 // Update the form label to point to the text input.
                 originalLabel.attr('for', state.inputId);
                 // Add the event handlers.

lib/templates/form_autocomplete_input.mustache

@@ -41,3 +41,13 @@
 {{^showSuggestions}}
 <input type="text" id="{{inputId}}" placeholder="{{placeholder}}" role="textbox" aria-owns="{{selectionId}}"/>
 {{/showSuggestions}}
+
+{{#js}}
+require(['jquery'], function($) {
+    // Set the minimum width of the input so that the placeholder is whole displayed.
+    var inputElement = $(document.getElementById('{{inputId}}'));
+    if (inputElement.length) {
+        inputElement.css('min-width', inputElement.attr('placeholder').length + 'ch');
+    }
+});
+{{/js}}

theme/boost/templates/core/form_autocomplete_input.mustache

@@ -41,3 +41,13 @@
 {{^showSuggestions}}
 <input type="text" id="{{inputId}}" placeholder="{{placeholder}}" role="textbox" aria-owns="{{selectionId}}"/>
 {{/showSuggestions}}
+
+{{#js}}
+require(['jquery'], function($) {
+    // Set the minimum width of the input so that the placeholder is whole displayed.
+    var inputElement = $(document.getElementById('{{inputId}}'));
+    if (inputElement.length) {
+        inputElement.css('min-width', inputElement.attr('placeholder').length + 'ch');
+    }
+});
+{{/js}}