Bug/ onCardUpdate does not fire (#29)

* Re-write of the class to function component conversion of InlineInput so the onSave fires
KaiSpencer · Dec 30, 2023 · dd24717 · dd24717
1 parent 5b2a3c6
commit dd24717
Show file tree

Hide file tree

Showing 4 changed files with 511 additions and 86 deletions.
diff --git a/.changeset/wise-guests-invite.md b/.changeset/wise-guests-invite.md
@@ -0,0 +1,5 @@
+---
+"react-trello-ts": patch
+---
+
+bug/ onCardUpdate should fire - #26
diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml
@@ -25,6 +25,12 @@ jobs:
           with:
             version: 8
             run_install: false
+
+        - name: Cypress install
+          uses: cypress-io/github-action@v6
+          with:
+            # Disable running of tests within install job
+            runTests: false
 
         - name: Get pnpm store directory
           id: pnpm-cache

diff --git a/packages/react-trello-ts/src/widgets/InlineInput.tsx b/packages/react-trello-ts/src/widgets/InlineInput.tsx
@@ -1,92 +1,104 @@
-import React, {
-	FC,
-	PropsWithChildren,
-	useEffect,
-	useRef,
-	useState,
-} from "react";
-import { InlineInput as _InlineInput } from "../styles/Base";
-import autosize from "autosize";
+import React, {FC, useEffect, useRef, useState} from 'react'
+import {InlineInput as _InlineInput} from '@/styles/Base'
+import autosize from 'autosize'
 
 interface InlineInputProps {
-	onSave?: (inputValue: string) => void;
-	onCancel?: () => void;
-	border?: boolean;
-	placeholder?: string;
-	value?: string;
-	autoFocus?: boolean;
-	resize?: "vertical" | "horizontal" | "none";
+  onSave?: (inputValue: string) => void
+  onCancel?: () => void
+  border?: boolean
+  placeholder?: string
+  value?: string
+  autoFocus?: boolean
+  resize?: 'none' | 'vertical' | 'horizontal'
 }
 
-export const InlineInput: FC<PropsWithChildren<InlineInputProps>> = ({
-	autoFocus = false,
-	border = false,
-	onSave,
-	onCancel,
-	placeholder = "",
-	resize = "none",
-	value = "",
+export const InlineInput: FC<InlineInputProps> = ({
+  autoFocus = false,
+  border = false,
+  onSave = () => {},
+  onCancel = () => {},
+  placeholder = '',
+  value = '',
+  resize = 'none'
 }) => {
-	const inputRef = useRef<HTMLTextAreaElement>();
-	const [inputValue, setInputValue] = useState(value);
-	const onFocus = (e: React.FocusEvent<HTMLTextAreaElement>) => {
-		e.target.select();
-	};
-	const onMouseDown = (e: React.MouseEvent<HTMLTextAreaElement>) => {
-		if (document.activeElement !== e.target) {
-			e.preventDefault();
-			inputRef.current.focus();
-		}
-	};
-	const onBlur = () => {
-		if (inputValue !== value) {
-			onSave(inputValue);
-		}
-	};
+  const [inputValue, setInputValue] = useState(value)
+  const inputRef = useRef<HTMLTextAreaElement | null>(null)
 
-	const onKeyDown = (e: React.KeyboardEvent) => {
-		if (e.key === "Enter") {
-			inputRef.current.blur();
-			e.preventDefault();
-		}
-		if (e.key === "Escape") {
-			setInputValue(value);
-			inputRef.current.blur();
-			e.preventDefault();
-		}
-		if (e.key === "Tab") {
-			if (inputValue.length === 0) {
-				onCancel();
-			}
-			inputRef.current.blur();
-			e.preventDefault();
-		}
-	};
-	const setRef = (ref: HTMLTextAreaElement) => {
-		inputRef.current = ref;
-		if (resize !== "none") {
-			autosize(inputRef);
-		}
-	};
-	useEffect(() => {
-		setInputValue(value);
-	}, [resize]);
-	return (
-		<_InlineInput
-			ref={setRef}
-			border={border}
-			onMouseDown={onMouseDown}
-			onFocus={onFocus}
-			onBlur={onBlur}
-			onKeyDown={onKeyDown}
-			placeholder={value.length === 0 ? undefined : placeholder}
-			defaultValue={value}
-			autoComplete="off"
-			autoCorrect="off"
-			autoCapitalize="off"
-			spellCheck="false"
-			rows={1}
-			autoFocus={autoFocus}
-		/>
-	);
-};
+  const onFocus = (e: React.FocusEvent<HTMLTextAreaElement>) => e.target.select()
+
+  const onMouseDown = (e: React.MouseEvent<HTMLTextAreaElement>) => {
+    if (document.activeElement !== e.target) {
+      e.preventDefault()
+      inputRef.current.focus()
+    }
+  }
+
+  const onBlur = () => {
+    updateValue()
+  }
+
+  const onKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      inputRef.current.blur()
+      e.preventDefault()
+    }
+    if (e.key === 'Escape') {
+      setValue(value)
+      inputRef.current.blur()
+      e.preventDefault()
+    }
+    if (e.key === 'Tab') {
+      if (inputValue.length === 0) {
+        onCancel()
+      }
+      inputRef.current.blur()
+      e.preventDefault()
+    }
+  }
+
+  const getValue = () => inputRef.current.value || ''
+  const setValue = (newValue: string) => {
+    if (inputRef.current) {
+      inputRef.current.value = newValue
+    }
+  }
+
+  const updateValue = () => {
+    if (getValue() !== value) {
+      onSave(getValue())
+    }
+  }
+
+  const setRef = (ref: HTMLTextAreaElement) => {
+    inputRef.current = ref
+    if (resize !== 'none') {
+      autosize(inputRef.current)
+    }
+  }
+
+  useEffect(
+    () => {
+      setInputValue(value)
+    },
+    [value]
+  )
+
+  return (
+    <_InlineInput
+      ref={setRef}
+      border={border}
+      onMouseDown={onMouseDown}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      onKeyDown={onKeyDown}
+      placeholder={value.length === 0 ? undefined : placeholder}
+      defaultValue={value}
+      autoComplete="off"
+      autoCorrect="off"
+      autoCapitalize="off"
+      spellCheck="false"
+      rows={1}
+      autoFocus={autoFocus}
+    />
+  )
+}