{% extends 'forms/base_widget.html' %}

{% block html %}
    <input type="hidden" id="{{ field.id }}" name="{{ field.name }}" value="{{ field._value() | tojson | forceescape }}">
    <input type="text" id="display-{{ field.id }}" placeholder="{% trans %}Choose user...{% endtrans %}" readonly>
    <button id="choose-{{ field.id }}" class="i-button">{% trans %}Choose{% endtrans %}</button>
{% endblock %}

{% block javascript %}
    <script>
        $(function() {
            'use strict';

            var button = $('#choose-{{ field.id }}');
            var display = $('#display-{{ field.id }}');
            var field = $('#{{ field.id }}');

            {% if not field.flags.required %}
                display.clearableinput({
                    clearOnEscape: false,
                    focusAfter: false,
                    callback: function() {
                        field.principalfield('remove');
                    }
                });
            {% endif %}

            field.principalfield({
                onUpdate: function(users) {
                    var name = users[0] ? users[0].name : ''
                    {% if not field.flags.required %}
                        display.clearableinput('setValue', name);
                    {% else %}
                        display.val(name);
                    {% endif %}
                }
            });

            display.add(button).on('click', function() {
                field.principalfield('choose');
            });
        });
    </script>
{% endblock %}

Add a simple text input-based principal widget
Add a simple text input-based principal widget
