gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-31 19:49:01 +01:00
Code Issues Actions 6 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

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) {
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(() => {
if (autoFocus) {
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 (
<input
ref={inputRef}
@ -33,11 +37,13 @@ export default function FormTextBox({ inputRef, className, type, currentValue, o
value={currentValue}
onInput={onChange && (e => {
const target = e.currentTarget;
onChange?.(target.value, target.validity);
const currentValue = applyLimits(e.currentTarget.value);
onChange?.(currentValue, target.validity);
})}
onBlur={onBlur && (e => {
const target = e.currentTarget;
onBlur(target.value);
onBlur={(e => {
const currentValue = applyLimits(e.currentTarget.value);
e.currentTarget.value = currentValue;
onBlur?.(currentValue);
})}
{...rest}
/>
@ -49,6 +55,6 @@ export function FormTextBoxWithUnit(props: FormTextBoxProps & { unit: string })
<label class="input-group tn-number-unit-pair">
<FormTextBox {...props} />
<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")}>
<FormTextBoxWithUnit
type="number" min={MIN_CONTENT_WIDTH} step="10"
currentValue={maxContentWidth} onChange={setMaxContentWidth}
currentValue={maxContentWidth} onBlur={setMaxContentWidth}
unit={t("max_content_width.max_width_unit")}
/>
</FormGroup>