mirror of
https://github.com/moodle/moodle.git
synced 2025-01-18 22:08:20 +01:00
f07d3b71d2
The form_autocomplete is essentially a custom element. Unfortunately the `setValue()` function in Mink has undesired actions so it is necessary to write our own handling for it. The standard Mink `setValue()` function focuses the element, sets a value, and then blurs the element. In the case of the autocomplete this can cause the autocomplete suggestions list to be closed in some situations. Instead of using the setValue we click, and type the value, but do not immediately blur.
81 lines
2.8 KiB
Plaintext
81 lines
2.8 KiB
Plaintext
{{!
|
|
This file is part of Moodle - http://moodle.org/
|
|
|
|
Moodle is free software: you can redistribute it and/or modify
|
|
it under the terms of the GNU General Public License as published by
|
|
the Free Software Foundation, either version 3 of the License, or
|
|
(at your option) any later version.
|
|
|
|
Moodle is distributed in the hope that it will be useful,
|
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
GNU General Public License for more details.
|
|
|
|
You should have received a copy of the GNU General Public License
|
|
along with Moodle. If not, see <http://www.gnu.org/licenses/>.
|
|
}}
|
|
{{!
|
|
@template core/form_autocomplete_input
|
|
|
|
Moodle template for the input field in an autocomplate form element.
|
|
|
|
Classes required for JS:
|
|
* none
|
|
|
|
Data attributes required for JS:
|
|
* none
|
|
|
|
Context variables required for this template:
|
|
* inputId The dom id of this input field.
|
|
* suggestionsId The dom id of the suggestions list.
|
|
* selectionId The dom id of the current selection list.
|
|
* downArrowId The dom id of the down arrow to open the suggestions.
|
|
* placeholder The place holder text when the field is empty
|
|
|
|
Example context (json):
|
|
{ "inputID": 1, "suggestionsId": 2, "selectionId": 3, "downArrowId": 4, "placeholder": "Select something" }
|
|
}}
|
|
{{#showSuggestions}}
|
|
<div class="d-md-inline-block mr-md-2 position-relative">
|
|
<input type="text"{{!
|
|
}} id="{{inputId}}"{{!
|
|
}} class="form-control"{{!
|
|
}} list="{{suggestionsId}}"{{!
|
|
}} placeholder="{{placeholder}}"{{!
|
|
}} role="combobox"{{!
|
|
}} aria-expanded="false"{{!
|
|
}} autocomplete="off"{{!
|
|
}} autocorrect="off"{{!
|
|
}} autocapitalize="off"{{!
|
|
}} aria-autocomplete="list"{{!
|
|
}} aria-owns="{{suggestionsId}} {{selectionId}}"{{!
|
|
}} {{#tags}}data-tags="1"{{/tags}}{{!
|
|
}} {{#multiple}}data-multiple="multiple"{{/multiple}}{{!
|
|
}}>
|
|
<span class="form-autocomplete-downarrow position-absolute p-1" id="{{downArrowId}}">▼</span>
|
|
</div>
|
|
{{/showSuggestions}}
|
|
{{^showSuggestions}}
|
|
<div class="d-md-inline-block mr-md-2">
|
|
<input type="text"{{!
|
|
}} id="{{inputId}}"{{!
|
|
}} class="form-control"{{!
|
|
}} placeholder="{{placeholder}}"{{!
|
|
}} role="textbox"{{!
|
|
}} aria-owns="{{selectionId}}"{{!
|
|
}} {{#tags}}data-tags="1"{{/tags}}{{!
|
|
}} {{#multiple}}data-multiple="multiple"{{/multiple}}{{!
|
|
}}>
|
|
</div>
|
|
{{/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}}
|