import { t } from '../../js/fake-translator';
+import events from '../../js/event';
import inputModule from '../../js/input';
import Widget from '../../js/widget';
@@ -55,7 +56,7 @@ widget/number-input/number-input.js
* @abstract
* @extends {Widget<HTMLInputElement>}
*/
-export default class NumberInput extends Widget {
+class NumberInput extends Widget {
/**
* @abstract
*/
@@ -90,10 +91,27 @@ widget/number-input/number-input.js
].every((className) => !question.classList.contains(className));
}
- get formatter() {
- const locales = Intl.getCanonicalLocales(navigator.languages);
+ get languages() {
+ const formLanguage = this.languageSelect?.value;
- return Intl.NumberFormat(locales);
+ let validFormLanguage;
+
+ try {
+ Intl.getCanonicalLocales(formLanguage);
+
+ validFormLanguage = formLanguage;
+ } catch {
+ // If this fails, the form's selected language is likely not a valid
+ // code and will cause all other `Intl` usage to fail.
+ }
+
+ return [validFormLanguage, ...navigator.languages].filter(
+ (language) => language != null
+ );
+ }
+
+ get language() {
+ return this.languages[0] ?? navigator.language;
}
/** @type {Set<string>} */
@@ -135,28 +153,49 @@ widget/number-input/number-input.js
constructor(input, options) {
super(input, options);
+ const formElement = input.closest('form.or');
+
+ /** @type {HTMLSelectElement | null} */
+ this.languageSelect =
+ formElement.parentElement?.querySelector('#form-languages');
+
let { characterPattern } = this;
const question = inputModule.getWrapNode(input);
const message = document.createElement('div');
message.classList.add('invalid-value-msg', 'active');
- question.setAttribute('lang', navigator.language);
- question.classList.add('active');
+
+ question.setAttribute('lang', this.language);
question.append(message);
this.question = question;
this.message = message;
- this.format();
+ this.setReformattedValue(input.valueAsNumber);
this.setValidity();
- window.addEventListener('languagechange', () => {
- characterPattern = this.validCharacter;
- question.setAttribute('lang', navigator.language);
- this.format();
+ const languageChanged = () => {
+ // Important: this value may become invalid if it isn't accessed
+ // before setting `lang`. This repros in Firefox if:
+ //
+ // 1. Your default language is English
+ // 2. Set a decimal value
+ // 3. Switch to French
+ // 4. Switch back to English
+ const { valueAsNumber } = input;
+
+ characterPattern = this.characterPattern;
+ question.setAttribute('lang', this.language);
+ this.setReformattedValue(valueAsNumber);
this.setValidity();
- });
+ };
+
+ formElement.addEventListener(
+ events.ChangeLanguage().type,
+ languageChanged
+ );
+ window.addEventListener('languagechange', languageChanged);
input.addEventListener('keydown', (event) => {
const { ctrlKey, isComposing, key, metaKey } = event;
@@ -179,21 +218,20 @@ widget/number-input/number-input.js
});
}
- format() {
- const { formatter, element, pattern } = this;
- const { valueAsNumber } = element;
-
- element.setAttribute('pattern', pattern.source);
-
- if (valueAsNumber !== '') {
- const formatted = formatter.format(valueAsNumber);
+ /**
+ * @param {number} value
+ */
+ setReformattedValue(value) {
+ const { element, pattern } = this;
- element.value = formatted;
+ element.removeAttribute('pattern');
+ element.value = '';
- if (element.value !== formatted) {
- element.value = valueAsNumber;
- }
+ if (!Number.isNaN(value)) {
+ element.value = value;
}
+
+ element.setAttribute('pattern', pattern);
}
setValidity() {
@@ -206,6 +244,8 @@ widget/number-input/number-input.js
this.isValid = isValid;
}
}
+
+export default NumberInput;