fix: avoid readonly attribute on select element (#4819)

* fix: avoid readonly attribute on select element

* chore: remove now-unused CSS for select2

* test: don't ignore `readonly` on `select`

* refactor: simplify OutgoingLiaisonForm base class overrides

ietf/liaisons/forms.py

@@ -471,7 +471,6 @@ class IncomingLiaisonForm(LiaisonModelForm):
 
 
 class OutgoingLiaisonForm(LiaisonModelForm):
-    from_contact = SearchableEmailField(only_users=True)
     approved = forms.BooleanField(label="Obtained prior approval", required=False)
 
     class Meta:
@@ -501,6 +500,7 @@ class OutgoingLiaisonForm(LiaisonModelForm):
             self.fields['from_groups'].initial = [flat_choices[0][0]]
         
         if has_role(self.user, "Secretariat"):
+            self.fields['from_contact'] = SearchableEmailField(only_users=True)  # secretariat can edit this field!
             return
 
         if self.person.role_set.filter(name='liaiman',group__state='active'):
@@ -509,8 +509,10 @@ class OutgoingLiaisonForm(LiaisonModelForm):
             email = self.person.role_set.filter(name__in=('ad','chair'),group__state='active').first().email.address
         else:
             email = self.person.email_address()
+
+        # Non-secretariat user cannot change the from_contact field. Fill in its value.
+        self.fields['from_contact'].disabled = True
         self.fields['from_contact'].initial = email
-        self.fields['from_contact'].widget.attrs['readonly'] = True
 
     def set_to_fields(self):
         '''Set to_groups and to_contacts options and initial value based on user

ietf/static/css/select2.scss

@@ -3,21 +3,3 @@
 @import "bootstrap/scss/mixins";
 @import "select2/src/scss/core";
 @import "select2-bootstrap-5-theme/src/include-all";
-
-// Propagate readonly property from input to select2 instrumentation, based on
-// https://stackoverflow.com/questions/41807096/select2-make-it-readonly-not-disabled-from-js/55001516#55001516
-select[readonly].select2-hidden-accessible + .select2-container {
-  pointer-events: none;
-  touch-action: none;
-
-  .select2-selection {
-    background: $form-select-disabled-bg;
-    color: $form-select-disabled-color;
-    border-color: $form-select-disabled-border-color;
-    box-shadow: none;
-  }
-
-  .select2-selection__arrow, .select2-selection__clear {
-    display: none;
-  }
-}

ietf/utils/test_runner.py

@@ -203,7 +203,6 @@ def vnu_filter_message(msg, filter_db_issues, filter_test_issues):
 
     return re.search(
         r"""document\ is\ not\ mappable\ to\ XML\ 1|
-             Attribute\ 'readonly'\ not\ allowed\ on\ element\ 'select'|
             ^Attribute\ 'required'\ not\ allowed\ on\ element\ 'div'|
             ^The\ 'type'\ attribute\ is\ unnecessary\ for\ JavaScript|
             is\ not\ in\ Unicode\ Normalization\ Form\ C""",