gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-04 21:49:04 +01:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

fix(settings): max content width forces minimum when typing (closes #7423)

Browse Source
This commit is contained in:
Elian Doran 2025-10-20 18:34:57 +03:00
parent a664a58076
commit d4a46ed4da
No known key found for this signature in database
2 changed files with 23 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
apps/client/src/widgets/react/FormTextBox.tsx
View File

@ -9,22 +9,26 @@ interface FormTextBoxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "
} }
export default function FormTextBox({ inputRef, className, type, currentValue, onChange, onBlur, autoFocus, ...rest}: FormTextBoxProps) { export default function FormTextBox({ inputRef, className, type, currentValue, onChange, onBlur, autoFocus, ...rest}: FormTextBoxProps) {
if (type === "number" && currentValue) {
const { min, max } = rest;
const currentValueNum = parseInt(currentValue, 10);
if (min && currentValueNum < parseInt(String(min), 10)) {
currentValue = String(min);
} else if (max && currentValueNum > parseInt(String(max), 10)) {
currentValue = String(max);
}
}
useEffect(() => { useEffect(() => {
if (autoFocus) { if (autoFocus) {
inputRef?.current?.focus(); inputRef?.current?.focus();
} }
}, []); }, []);
function applyLimits(value: string) {
if (type === "number") {
const { min, max } = rest;
const currentValueNum = parseInt(value, 10);
if (min && currentValueNum < parseInt(String(min), 10)) {
return String(min);
} else if (max && currentValueNum > parseInt(String(max), 10)) {
return String(max);
}
}
return value;
}
return ( return (
<input <input
ref={inputRef} ref={inputRef}
@ -33,11 +37,13 @@ export default function FormTextBox({ inputRef, className, type, currentValue, o
value={currentValue} value={currentValue}
onInput={onChange && (e => { onInput={onChange && (e => {
const target = e.currentTarget; const target = e.currentTarget;
onChange?.(target.value, target.validity); const currentValue = applyLimits(e.currentTarget.value);
onChange?.(currentValue, target.validity);
})} })}
onBlur={onBlur && (e => { onBlur={(e => {
const target = e.currentTarget; const currentValue = applyLimits(e.currentTarget.value);
onBlur(target.value); e.currentTarget.value = currentValue;
onBlur?.(currentValue);
})} })}
{...rest} {...rest}
/> />

2
apps/client/src/widgets/type_widgets/options/appearance.tsx
View File

@ -294,7 +294,7 @@ function MaxContentWidth() {
<FormGroup name="max-content-width" label={t("max_content_width.max_width_label")}> <FormGroup name="max-content-width" label={t("max_content_width.max_width_label")}>
<FormTextBoxWithUnit <FormTextBoxWithUnit
type="number" min={MIN_CONTENT_WIDTH} step="10" type="number" min={MIN_CONTENT_WIDTH} step="10"
currentValue={maxContentWidth} onChange={setMaxContentWidth} currentValue={maxContentWidth} onBlur={setMaxContentWidth}
unit={t("max_content_width.max_width_unit")} unit={t("max_content_width.max_width_unit")}
/> />
</FormGroup> </FormGroup>