Fix Safari baseline bug for entries fields

webapp/app/forms/fields.py

@@ -15,25 +15,36 @@
 from app.forms.validators import ValidElsterCharacterSet
 
 
+class BaselineBugFixMixin:
+    """ Safari and Firefox have a bug where empty input fields do not align correctly with baseline alignment. The reason is that
+    if an input field is empty its bottom border is used as the baseline instead of the baseline of the text input.
+    This can be fixed by setting a placeholder text. """
+
+    def __call__(self, field, **kwargs):
+        # Safari and Firefox have has a bug where empty input fields do not align correctly with baseline alignment.
+        # Thus, we add a placeholder.
+        kwargs.setdefault('placeholder', ' ')
+        return kwargs
+
+
 class SteuerlotseStringField(StringField):
 
     def pre_validate(self, form):
         ValidElsterCharacterSet().__call__(form, self)
 
 
-class MultipleInputFieldWidget(TextInput):
+class MultipleInputFieldWidget(TextInput, BaselineBugFixMixin):
     """A divided input field."""
     sub_field_separator = ''
     input_field_lengths = []
     input_field_labels = []
 
     def __call__(self, field, **kwargs):
+        kwargs = BaselineBugFixMixin.__call__(self, field, **kwargs)
+
         if 'required' not in kwargs and 'required' in getattr(field, 'flags', []):
             kwargs['required'] = True
         kwargs['class'] = 'form-control'
-        # Safari has a bug where empty input fields do not align correctly with baseline alignment.
-        # Thus, we add a placeholder.
-        kwargs['placeholder'] = ' '
 
         joined_input_fields = Markup()
         for idx, input_field_length in enumerate(self.input_field_lengths):
@@ -232,14 +243,15 @@ def __init__(self, label=None, false_values=None, input_required=True, **kwargs)
         )
 
 
-class JqueryEntriesWidget(object):
+class JqueryEntriesWidget(BaselineBugFixMixin, object):
     """A custom multi-entry widget that is based on jquery."""
     html_params = staticmethod(html_params)
 
     def __init__(self):
         self.input_type = None
 
     def __call__(self, field, **kwargs):
+        kwargs = super().__call__(field, **kwargs)
         kwargs.setdefault('id', field.id)
         kwargs.setdefault('data', field.data)
         kwargs.setdefault('split_chars', field.split_chars)

webapp/app/templates/fields/jquery_entries.html

@@ -9,11 +9,12 @@
 {% endif %}
 {% macro remove_button() %}<button type="button" id="{{id}}-remove" class="remove-button" aria-label="{{ _('jquery_entries.remove.aria-label') }}">×</button>{% endmacro -%}
 
+
+{% macro entry(kwargs, item=None) %}<div class="{{dynamic_div_classes}}"><input {% if 'autofocus' in kwargs %}autofocus {% endif %} {% if 'placeholder' in kwargs %}placeholder="{{kwargs['placeholder']}}" {% endif %} class="dynamic-entry {{dynamic_input_classes}}" type="text" {% if item %}value="{{item}}"{% endif %}>{{remove_button()}}</div>{% endmacro %}
+
 <div id="{{id}}-div">
     {%- for item in kwargs['data'] %}
-    <div class="{{dynamic_div_classes}}">
-        <input {% if 'autofocus' in kwargs %}autofocus {% endif %}class="dynamic-entry {{dynamic_input_classes}}" type="text" value="{{item}}">{{remove_button()}}
-    </div>
+        {{ entry(kwargs, item) }}
     {%- endfor -%}
 </div>
 <input name="{{id}}" type="hidden" value="{{kwargs['value']}}" />
@@ -30,7 +31,7 @@
 
         $('#{{id}}-add').on('click', function (event) {
             event.preventDefault();
-            $app.append($('<div class="{{dynamic_div_classes}}"><input class="dynamic-entry {{dynamic_input_classes}}" type="text">{{remove_button()}}</div>'))
+            $app.append($('{{entry(kwargs)}}'))
                 .find('input').focus();
         });