From dcf1e08477639472fd0dee80a8dfa47ab64da94d Mon Sep 17 00:00:00 2001
From: Arit Amana <32520970+msarit@users.noreply.github.com>
Date: Tue, 9 Nov 2021 08:27:18 -0500
Subject: [PATCH] Remove chars-count from user fields; fix inconsistent loading
 (#15309)

* remove chars-count from user fields; fix inconsistent loading

* remove "if loaded" check

* simplify iteration
---
 app/javascript/packs/userProfileSettings.js | 40 +++++++++------------
 app/views/users/_profile.html.erb           | 24 ++-----------
 2 files changed, 19 insertions(+), 45 deletions(-)

diff --git a/app/javascript/packs/userProfileSettings.js b/app/javascript/packs/userProfileSettings.js
index 8013fd49e..7847e0805 100644
--- a/app/javascript/packs/userProfileSettings.js
+++ b/app/javascript/packs/userProfileSettings.js
@@ -1,31 +1,23 @@
-const userFieldIds = ['user[name]', 'user[email]', 'user[username]'];
-const profileFieldIds = Array.from(
-  document.querySelectorAll('[id^="profile["]'),
-).map((node) => node.id);
-const allFieldIds = [...userFieldIds, ...profileFieldIds];
+const userSettingForm = document.getElementById('user-profile-form');
+const profileFields = document.querySelectorAll('[id^="profile["]');
 
 export function fieldCharacterLimits() {
-  window.addEventListener('load', () => {
-    allFieldIds.forEach((field_id) => {
-      const field = document.getElementById(field_id);
-      const fieldValueLength = field.value.length;
-      const fieldCharacterSpan = document.getElementById(
-        field.dataset.characterSpanId,
-      );
-      fieldCharacterSpan.innerHTML = fieldValueLength;
-    });
+  profileFields.forEach((node) => {
+    const field = document.getElementById(node.id);
+    const fieldValueLength = field.value.length;
+    const fieldCharacterSpan = document.getElementById(
+      field.dataset.characterSpanId,
+    );
+    fieldCharacterSpan.innerHTML = fieldValueLength;
+  });
 
-    document
-      .getElementById('user-profile-form')
-      .addEventListener('keyup', (event) => {
-        if (!event.target.dataset.characterSpanId) {
-          return;
-        }
+  userSettingForm.addEventListener('keyup', (event) => {
+    if (!event.target.dataset.characterSpanId) {
+      return;
+    }
 
-        document.getElementById(
-          event.target.dataset.characterSpanId,
-        ).innerHTML = event.target.value.length;
-      });
+    document.getElementById(event.target.dataset.characterSpanId).innerHTML =
+      event.target.value.length;
   });
 }
 
diff --git a/app/views/users/_profile.html.erb b/app/views/users/_profile.html.erb
index 93ca80e6b..2975520b1 100644
--- a/app/views/users/_profile.html.erb
+++ b/app/views/users/_profile.html.erb
@@ -13,13 +13,7 @@
                        maxlength: 30,
                        class: "crayons-textfield",
                        placeholder: "John Doe",
-                       value: @user.name,
-                       aria: { describedby: "name-description" },
-                       data: { character_span_id: "name-characters" } %>
-      <p id="name-description" class="crayons-field__description align-right">
-        <span class="screen-reader-only">Available characters used: </span>
-        <span id="name-characters"></span>/30
-      </p>
+                       value: @user.name %>
     </div>
 
     <div class="crayons-field">
@@ -28,13 +22,7 @@
                        maxlength: 50,
                        class: "crayons-textfield",
                        placeholder: "john.doe@example.com",
-                       value: @user.email,
-                       aria: { describedby: "email-description" },
-                       data: { character_span_id: "email-characters" } %>
-      <p id="email-description" class="crayons-field__description align-right">
-        <span class="screen-reader-only">Available characters used: </span>
-        <span id="email-characters"></span>/50
-      </p>
+                       value: @user.email %>
     </div>
 
     <div class="crayons-field crayons-field--checkbox">
@@ -48,13 +36,7 @@
                        maxlength: 30,
                        class: "crayons-textfield",
                        placeholder: "johndoe",
-                       value: @user.username,
-                       aria: { describedby: "username-description" },
-                       data: { character_span_id: "username-characters" } %>
-      <p id="username-description" class="crayons-field__description align-right">
-        <span class="screen-reader-only">Available characters used: </span>
-        <span id="username-characters"></span>/30
-      </p>
+                       value: @user.username %>
     </div>
 
     <div class="crayons-field">