Investigate & Clarify: KTextbox does not localize the character counter

[jonboiser]

Acceptance Criteria

• [ ] Investigate potential causes of this (note @indirectlylit 's comment below about this possibly being Chrome specific). In any case - determine a potential solution
• [ ] One of: 1) Fix the issue if it is a quick fix, 2) Create a follow-up issue detailing the way to resolve the problem

Product

Kolibri

Expected behavior

Marathi is one of the locales that has a number system distinct from the arabic numerals (0-9). KTextbox should also localize the numbers in KTextbox.

Actual behavior

Also, there's this punctuation alignment issue with Khmer, which might be handled using hacks specifically for that locale.

Steps to reproduce the issue

1. With the locale set to Marathi, go to any form with a text input that has a maxlength attribute (e.g. the user profile page + username input)
2. The numbers in the textbox character counter will not be localized.

Additional information

In Kolibri, https://github.com/learningequality/kolibri/pull/7953 tries to fill in a number of gaps where we aren't localizing numbers.

This comment https://github.com/learningequality/kolibri/pull/7953#issuecomment-813699770 points to a possible cross-browser issue localizing number inputs.

Environment

• OS:
• Browser version:

[indirectlylit]

Also relevant:

• https://github.com/learningequality/kolibri/issues/4363
• https://bugs.chromium.org/p/chromium/issues/detail?id=1057881

Worth checking if this is Chrome-specific

[pcenov]

Hi @nucleogenesis and @radinamatic - this issue is extant in Kolibri 0.17 in all supported browsers and is valid for all languages so it should be further specified which exactly are the languages with number system distinct from the so called Arabic numerals (0-9).

[rtibbles]

Noting that this issue is caused by the fact that KTextbox is still just a very thin wrapper around keen's UITextbox, and in there, it is just injecting raw values: https://github.com/learningequality/kolibri-design-system/blob/release-v4/lib/keen/UiTextbox.vue#L114 and not wrapping them in $formatNumber.

Note that even with wrapping them in $formatNumber I have observed issues in Chrome with numbers being properly formatted (although it may have to do with installed languages) - I did not observe similar issues in Firefox, so this can be best tested there once fixed.