Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-05 04:45:47 +01:00
Code Issues Packages Projects Releases 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
2 changed files with 23 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
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}
/> />
@@ -49,6 +55,6 @@ export function FormTextBoxWithUnit(props: FormTextBoxProps & { unit: string })
<label class="input-group tn-number-unit-pair"> <label class="input-group tn-number-unit-pair">
<FormTextBox {...props} /> <FormTextBox {...props} />
<span class="input-group-text">{props.unit}</span> <span class="input-group-text">{props.unit}</span>
</label> </label>
) )
} }

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>