Fix character counter not updating for bio (#3101)

app/javascript/packs/public.js

@@ -101,7 +101,7 @@ document.addEventListener('DOMContentLoaded', () => {
   });
 
   delegate(document, '.account_note', 'input', ({ target }) => {
-    const [noteCounter, ] = document.getElementsByClassName('.note-counter');
+    const [noteCounter, ] = document.getElementsByClassName('note-counter');
     noteCounter.textContent = 160 - length(target.value);
   });
 });

app/views/settings/profiles/show.html.haml

@@ -5,8 +5,8 @@
   = render 'shared/error_messages', object: @account
 
   .fields-group
-    = f.input :display_name, placeholder: t('simple_form.labels.defaults.display_name'), hint: t('simple_form.hints.defaults.display_name', count: "<span class=\"name-counter\">#{30 - @account.display_name.size}</span>").html_safe
+    = f.input :display_name, placeholder: t('simple_form.labels.defaults.display_name'), hint: t('simple_form.hints.defaults.display_name', count: 30 - @account.display_name.size).html_safe
-    = f.input :note, placeholder: t('simple_form.labels.defaults.note'), hint: t('simple_form.hints.defaults.note', count: "<span class=\"note-counter\">#{160 - @account.note.size}</span>").html_safe
+    = f.input :note, placeholder: t('simple_form.labels.defaults.note'), hint: t('simple_form.hints.defaults.note', count: 160 - @account.note.size).html_safe
     = f.input :avatar, wrapper: :with_label, input_html: { accept: AccountAvatar::IMAGE_MIME_TYPES.join(',') }, hint: t('simple_form.hints.defaults.avatar')
     = f.input :header, wrapper: :with_label, input_html: { accept: AccountHeader::IMAGE_MIME_TYPES.join(',') }, hint: t('simple_form.hints.defaults.header')
 

config/locales/simple_form.en.yml

@@ -4,14 +4,14 @@ en:
     hints:
       defaults:
         avatar: PNG, GIF or JPG. At most 2MB. Will be downscaled to 120x120px
-        display_name: 
+        display_name:
-            one: '1 character left'
+            one: '<span class="name-counter">1</span> character left'
-            other: '%{count} characters left'
+            other: '<span class="name-counter">%{count}</span> characters left'
         header: PNG, GIF or JPG. At most 2MB. Will be downscaled to 700x335px
         locked: Requires you to manually approve followers and defaults post privacy to followers-only
-        note: 
+        note:
-            one: '1 character left'
+            one: '<span class="note-counter">1</span> character left'
-            other: '%{count} characters left'
+            other: '<span class="note-counter">%{count}</span> characters left'
       imports:
         data: CSV file exported from another Mastodon instance
       sessions: