discourse/app/assets/javascripts/admin/addon/components/site-settings/integer.gjs
Martin Brennan db993cf8fd
FIX: Do not allow , or . in site setting integer input (#27618)
Followup to e113eff663

We previously sanitized input for integer site settings
on the server side only, which was a bit confusing when
users would enter e.g. 100.5 and end up with 1005, and
not see this reflected in the UI.

Now that we are using native number inputs for these settings,
we can improve the experience a bit by not allowing `.` or `,`
in the input, because it should be whole numbers only, and
add a step size of 1. All other characters are already prevented
in this native number input.
2024-07-05 10:36:41 +10:00

42 lines
1.1 KiB
Plaintext

import Component from "@glimmer/component";
import { on } from "@ember/modifier";
import { action } from "@ember/object";
import SettingValidationMessage from "admin/components/setting-validation-message";
import SiteSettingDescription from "admin/components/site-settings/description";
export default class SiteSettingsInteger extends Component {
@action
updateValue(event) {
const num = parseInt(event.target.value, 10);
if (isNaN(num)) {
return;
}
this.args.changeValueCallback(num);
}
@action
preventDecimal(event) {
if (event.key === "." || event.key === ",") {
event.preventDefault();
}
}
<template>
<input
{{on "keydown" this.preventDecimal}}
{{on "input" this.updateValue}}
type="number"
value={{@value}}
min={{if @setting.min @setting.min null}}
max={{if @setting.max @setting.max null}}
class="input-setting-integer"
step="1"
/>
<SettingValidationMessage @message={{@validationMessage}} />
<SiteSettingDescription @description={{@setting.description}} />
</template>
}