From c261ada88b45efb82f237f012d80443b3ef2fc0b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20Mudr=C3=A1k?= <david@moodle.com>
Date: Mon, 16 Jul 2018 21:50:49 +0200
Subject: [PATCH] MDL-62848 form: Fix width of the autocomplete input field

Make sure that the autcomplete input field is wide enough to display the
placeholder text.
---
 lib/templates/form_autocomplete_input.mustache         | 10 ++++++++++
 .../templates/core/form_autocomplete_input.mustache    | 10 ++++++++++
 2 files changed, 20 insertions(+)

diff --git a/lib/templates/form_autocomplete_input.mustache b/lib/templates/form_autocomplete_input.mustache
index ad064f29eeb..7bf50328ced 100644
--- a/lib/templates/form_autocomplete_input.mustache
+++ b/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}}
diff --git a/theme/boost/templates/core/form_autocomplete_input.mustache b/theme/boost/templates/core/form_autocomplete_input.mustache
index f8d92938a58..0d2b9664c94 100644
--- a/theme/boost/templates/core/form_autocomplete_input.mustache
+++ b/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}}