starred/yaak-mountain-loop
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-04-23 17:18:32 +02:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Fix pair editor creating new entry by clicking value

Browse Source
This commit is contained in:
Gregory Schier
2025-07-18 08:54:37 -07:00
parent bcde4de4a7
commit 74b6f4fb42
1 changed files with 42 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src-web/components/core/PairEditor.tsx
View File

@@ -201,22 +201,35 @@ export const PairEditor = forwardRef<PairEditorRef, PairEditorProps>(function Pa
[setPairsAndSave, setForceFocusNamePairId, pairs], [setPairsAndSave, setForceFocusNamePairId, pairs],
); );
const handleFocus = useCallback( const handleFocusName = useCallback((pair: Pair) => {
(pair: Pair) => setForceFocusNamePairId(null); // Remove focus override when something focused
setPairs((pairs) => { setForceFocusValuePairId(null); // Remove focus override when something focused
setForceFocusNamePairId(null); // Remove focus override when something focused setPairs((pairs) => {
setForceFocusValuePairId(null); // Remove focus override when something focused const isLast = pair.id === pairs[pairs.length - 1]?.id;
const isLast = pair.id === pairs[pairs.length - 1]?.id; if (isLast) {
if (isLast) { const prevPair = pairs[pairs.length - 1];
const prevPair = pairs[pairs.length - 1]; setTimeout(() => setForceFocusNamePairId(prevPair?.id ?? null));
setForceFocusNamePairId(prevPair?.id ?? null); return [...pairs, emptyPair()];
return [...pairs, emptyPair()]; } else {
} else { return pairs;
return pairs; }
} });
}), }, []);
[],
); const handleFocusValue = useCallback((pair: Pair) => {
setForceFocusNamePairId(null); // Remove focus override when something focused
setForceFocusValuePairId(null); // Remove focus override when something focused
setPairs((pairs) => {
const isLast = pair.id === pairs[pairs.length - 1]?.id;
if (isLast) {
const prevPair = pairs[pairs.length - 1];
setTimeout(() => setForceFocusValuePairId(prevPair?.id ?? null));
return [...pairs, emptyPair()];
} else {
return pairs;
}
});
}, []);
return ( return (
<div <div
@@ -256,7 +269,8 @@ export const PairEditor = forwardRef<PairEditorRef, PairEditorProps>(function Pa
onChange={handleChange} onChange={handleChange}
onDelete={handleDelete} onDelete={handleDelete}
onEnd={handleEnd} onEnd={handleEnd}
onFocus={handleFocus} onFocusName={handleFocusName}
onFocusValue={handleFocusValue}
onMove={handleMove} onMove={handleMove}
pair={p} pair={p}
stateKey={stateKey} stateKey={stateKey}
@@ -292,7 +306,8 @@ type PairEditorRowProps = {
onEnd: (id: string) => void; onEnd: (id: string) => void;
onChange: (pair: PairWithId) => void; onChange: (pair: PairWithId) => void;
onDelete?: (pair: PairWithId, focusPrevious: boolean) => void; onDelete?: (pair: PairWithId, focusPrevious: boolean) => void;
onFocus?: (pair: PairWithId) => void; onFocusName?: (pair: PairWithId) => void;
onFocusValue?: (pair: PairWithId) => void;
onSubmit?: (pair: PairWithId) => void; onSubmit?: (pair: PairWithId) => void;
isLast?: boolean; isLast?: boolean;
disabled?: boolean; disabled?: boolean;
@@ -338,7 +353,8 @@ export function PairEditorRow({
onChange, onChange,
onDelete, onDelete,
onEnd, onEnd,
onFocus, onFocusName,
onFocusValue,
onMove, onMove,
pair, pair,
stateKey, stateKey,
@@ -365,7 +381,8 @@ export function PairEditorRow({
} }
}, [forceFocusValuePairId, pair.id]); }, [forceFocusValuePairId, pair.id]);
const handleFocus = useCallback(() => onFocus?.(pair), [onFocus, pair]); const handleFocusName = useCallback(() => onFocusName?.(pair), [onFocusName, pair]);
const handleFocusValue = useCallback(() => onFocusValue?.(pair), [onFocusValue, pair]);
const handleDelete = useCallback(() => onDelete?.(pair, false), [onDelete, pair]); const handleDelete = useCallback(() => onDelete?.(pair, false), [onDelete, pair]);
const handleChangeEnabled = useMemo( const handleChangeEnabled = useMemo(
@@ -503,7 +520,7 @@ export function PairEditorRow({
containerClassName={classNames(isLast && 'border-dashed')} containerClassName={classNames(isLast && 'border-dashed')}
label="Name" label="Name"
name={`name[${index}]`} name={`name[${index}]`}
onFocus={handleFocus} onFocus={handleFocusName}
placeholder={namePlaceholder ?? 'name'} placeholder={namePlaceholder ?? 'name'}
/> />
) : ( ) : (
@@ -524,7 +541,7 @@ export function PairEditorRow({
label="Name" label="Name"
name={`name[${index}]`} name={`name[${index}]`}
onChange={handleChangeName} onChange={handleChangeName}
onFocus={handleFocus} onFocus={handleFocusName}
placeholder={namePlaceholder ?? 'name'} placeholder={namePlaceholder ?? 'name'}
autocomplete={nameAutocomplete} autocomplete={nameAutocomplete}
autocompleteVariables={nameAutocompleteVariables} autocompleteVariables={nameAutocompleteVariables}
@@ -550,7 +567,7 @@ export function PairEditorRow({
containerClassName={classNames(isLast && 'border-dashed')} containerClassName={classNames(isLast && 'border-dashed')}
label="Value" label="Value"
name={`value[${index}]`} name={`value[${index}]`}
onFocus={handleFocus} onFocus={handleFocusValue}
placeholder={valuePlaceholder ?? 'value'} placeholder={valuePlaceholder ?? 'value'}
/> />
) : pair.value.includes('\n') ? ( ) : pair.value.includes('\n') ? (
@@ -579,7 +596,7 @@ export function PairEditorRow({
label="Value" label="Value"
name={`value[${index}]`} name={`value[${index}]`}
onChange={handleChangeValueText} onChange={handleChangeValueText}
onFocus={handleFocus} onFocus={handleFocusValue}
type={isLast ? 'text' : typeof valueType === 'function' ? valueType(pair) : valueType} type={isLast ? 'text' : typeof valueType === 'function' ? valueType(pair) : valueType}
placeholder={valuePlaceholder ?? 'value'} placeholder={valuePlaceholder ?? 'value'}
autocomplete={valueAutocomplete?.(pair.name)} autocomplete={valueAutocomplete?.(pair.name)}
@@ -603,7 +620,7 @@ export function PairEditorRow({
<IconButton <IconButton
iconSize="sm" iconSize="sm"
size="xs" size="xs"
icon={(isLast || disabled) ? 'empty' : 'chevron_down'} icon={isLast || disabled ? 'empty' : 'chevron_down'}
title="Select form data type" title="Select form data type"
className="text-text-subtle" className="text-text-subtle"
/> />