Remove broken key/value enter/backspace logic

src-web/components/core/Editor/Editor.tsx

@@ -36,7 +36,6 @@ export interface EditorProps {
   onChange?: (value: string) => void;
   onFocus?: () => void;
   onBlur?: () => void;
-  onEnter?: () => void;
   onKeyDown?: (e: KeyboardEvent) => void;
   singleLine?: boolean;
   wrapLines?: boolean;
@@ -62,7 +61,6 @@ const _Editor = forwardRef<EditorView | undefined, EditorProps>(function Editor(
     onFocus,
     onBlur,
     onKeyDown,
-    onEnter,
     className,
     singleLine,
     format,
@@ -85,12 +83,6 @@ const _Editor = forwardRef<EditorView | undefined, EditorProps>(function Editor(
     handleChange.current = onChange;
   }, [onChange]);
 
-  // Use ref so we can update the onChange handler without re-initializing the editor
-  const handleEnter = useRef<EditorProps['onEnter']>(onEnter);
-  useEffect(() => {
-    handleEnter.current = onEnter;
-  }, [onEnter]);
-
   // Use ref so we can update the onChange handler without re-initializing the editor
   const handleFocus = useRef<EditorProps['onFocus']>(onFocus);
   useEffect(() => {
@@ -172,7 +164,6 @@ const _Editor = forwardRef<EditorView | undefined, EditorProps>(function Editor(
             container,
             readOnly,
             singleLine,
-            onEnter: handleEnter,
             onChange: handleChange,
             onFocus: handleFocus,
             onBlur: handleBlur,
@@ -252,13 +243,11 @@ function getExtensions({
   onFocus,
   onBlur,
   onKeyDown,
-  onEnter,
 }: Pick<EditorProps, 'singleLine' | 'readOnly'> & {
   container: HTMLDivElement | null;
   onChange: MutableRefObject<EditorProps['onChange']>;
   onFocus: MutableRefObject<EditorProps['onFocus']>;
   onBlur: MutableRefObject<EditorProps['onBlur']>;
-  onEnter: MutableRefObject<EditorProps['onEnter']>;
   onKeyDown: MutableRefObject<EditorProps['onKeyDown']>;
 }) {
   // TODO: Ensure tooltips render inside the dialog if we are in one.
@@ -276,18 +265,6 @@ function getExtensions({
     ...(readOnly
       ? [EditorState.readOnly.of(true), EditorView.contentAttributes.of({ tabindex: '-1' })]
       : []),
-    ...(singleLine
-      ? [
-          EditorView.domEventHandlers({
-            keydown: (e) => {
-              // Submit nearest form on enter if there is one
-              if (onEnter != null && e.key === 'Enter') {
-                onEnter.current?.();
-              }
-            },
-          }),
-        ]
-      : []),
 
     // Handle onFocus
     EditorView.domEventHandlers({

src-web/components/core/Input.tsx

@@ -101,7 +101,10 @@ export const Input = forwardRef<EditorView | undefined, InputProps>(function Inp
 
   const wrapperRef = useRef<HTMLDivElement>(null);
 
-  const handleEnter = useCallback(() => {
+  // Submit nearest form on Enter key press
+  const handleKeyDown = useCallback((e: KeyboardEvent) => {
+    if (e.key !== 'Enter') return;
+
     const form = wrapperRef.current?.closest('form');
     if (!isValid || form == null) return;
 
@@ -147,7 +150,7 @@ export const Input = forwardRef<EditorView | undefined, InputProps>(function Inp
             id={id}
             singleLine
             wrapLines={size === 'auto'}
-            onEnter={handleEnter}
+            onKeyDown={handleKeyDown}
             type={type === 'password' && !obscured ? 'text' : type}
             defaultValue={defaultValue}
             forceUpdateKey={forceUpdateKey}

src-web/components/core/PairEditor.tsx

@@ -111,15 +111,6 @@ export const PairEditor = memo(function PairEditor({
     [hoveredIndex, setPairsAndSave],
   );
 
-  const handleSubmitRow = useCallback(
-    (pair: PairContainer) => {
-      const index = pairs.findIndex((p) => p.id === pair.id);
-      const id = pairs[index + 1]?.id ?? null;
-      setForceFocusPairId(id);
-    },
-    [pairs],
-  );
-
   const handleChange = useCallback(
     (pair: PairContainer) =>
       setPairsAndSave((pairs) => pairs.map((p) => (pair.id !== p.id ? p : pair))),
@@ -127,18 +118,26 @@ export const PairEditor = memo(function PairEditor({
   );
 
   const handleDelete = useCallback(
-    (pair: PairContainer) =>
-      setPairsAndSave((oldPairs) => oldPairs.filter((p) => p.id !== pair.id)),
-    [setPairsAndSave],
+    (pair: PairContainer, focusPrevious: boolean) => {
+      if (focusPrevious) {
+        const index = pairs.findIndex((p) => p.id === pair.id);
+        const id = pairs[index - 1]?.id ?? null;
+        setForceFocusPairId(id);
+      }
+      return setPairsAndSave((oldPairs) => oldPairs.filter((p) => p.id !== pair.id));
+    },
+    [setPairsAndSave, setForceFocusPairId, pairs],
   );
 
-  const handleFocus = useCallback((pair: PairContainer) => {
-    return setPairs((pairs) => {
-      setForceFocusPairId(null);
-      const isLast = pair.id === pairs[pairs.length - 1]?.id;
-      return isLast ? [...pairs, newPairContainer()] : pairs;
-    });
-  }, []);
+  const handleFocus = useCallback(
+    (pair: PairContainer) =>
+      setPairs((pairs) => {
+        setForceFocusPairId(null); // Remove focus override when something focused
+        const isLast = pair.id === pairs[pairs.length - 1]?.id;
+        return isLast ? [...pairs, newPairContainer()] : pairs;
+      }),
+    [],
+  );
 
   // Ensure there's always at least one pair
   useEffect(() => {
@@ -177,7 +176,6 @@ export const PairEditor = memo(function PairEditor({
               nameValidate={nameValidate}
               valueValidate={valueValidate}
               showDelete={!isLast}
-              onSubmit={handleSubmitRow}
               onChange={handleChange}
               onFocus={handleFocus}
               onDelete={handleDelete}
@@ -203,7 +201,7 @@ type FormRowProps = {
   onMove: (id: string, side: 'above' | 'below') => void;
   onEnd: (id: string) => void;
   onChange: (pair: PairContainer) => void;
-  onDelete?: (pair: PairContainer) => void;
+  onDelete?: (pair: PairContainer, focusPrevious: boolean) => void;
   onFocus?: (pair: PairContainer) => void;
   onSubmit?: (pair: PairContainer) => void;
   isLast?: boolean;
@@ -235,7 +233,6 @@ const FormRow = memo(function FormRow({
   onEnd,
   onFocus,
   onMove,
-  onSubmit,
   pairContainer,
   showDelete,
   valueAutocomplete,
@@ -268,20 +265,9 @@ const FormRow = memo(function FormRow({
   );
 
   const handleFocus = useCallback(() => onFocus?.(pairContainer), [onFocus, pairContainer]);
-  const handleDelete = useCallback(() => onDelete?.(pairContainer), [onDelete, pairContainer]);
-
-  const handleKeyDownName = useMemo(
-    () => (e: KeyboardEvent) => {
-      if (
-        e.key === 'Backspace' &&
-        pairContainer.pair.name === '' &&
-        pairContainer.pair.value === ''
-      ) {
-        e.preventDefault();
-        onDelete?.(pairContainer);
-      }
-    },
-    [pairContainer, onDelete],
+  const handleDelete = useCallback(
+    () => onDelete?.(pairContainer, false),
+    [onDelete, pairContainer],
   );
 
   const [, connectDrop] = useDrop<PairContainer>(
@@ -341,12 +327,7 @@ const FormRow = memo(function FormRow({
         className={classNames('mr-2', isLast && '!opacity-disabled')}
         onChange={handleChangeEnabled}
       />
-      <form
-        onSubmit={(e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          onSubmit?.(pairContainer);
-        }}
+      <div
         className={classNames(
           'grid items-center',
           '@xs:gap-2 @xs:!grid-rows-1 @xs:!grid-cols-[minmax(0,1fr)_minmax(0,1fr)]',
@@ -365,7 +346,6 @@ const FormRow = memo(function FormRow({
           defaultValue={pairContainer.pair.name}
           label="Name"
           name="name"
-          onKeyDown={handleKeyDownName}
           onChange={handleChangeName}
           onFocus={handleFocus}
           placeholder={namePlaceholder ?? 'name'}
@@ -388,7 +368,7 @@ const FormRow = memo(function FormRow({
           autocomplete={valueAutocomplete?.(pairContainer.pair.name)}
           autocompleteVariables={valueAutocompleteVariables}
         />
-      </form>
+      </div>
       <IconButton
         aria-hidden={!showDelete}
         disabled={!showDelete}