[Maintenance] Input onChangeValue and onUpdate prop naming (#2381)

* Differentiate Input onUpdate to onChangeValue

* Release notes

* Fix lint error

* Remove onChange

packages/desktop-client/src/components/accounts/MobileAccountDetails.jsx

@@ -43,7 +43,7 @@ function TransactionSearchInput({ accountName, onSearch }) {
           />
         }
         value={text}
-        onUpdate={text => {
+        onChangeValue={text => {
           setText(text);
           onSearch(text);
         }}

packages/desktop-client/src/components/common/Input.tsx

@@ -27,6 +27,7 @@ export type InputProps = InputHTMLAttributes<HTMLInputElement> & {
   inputRef?: Ref<HTMLInputElement>;
   onEnter?: (event: KeyboardEvent<HTMLInputElement>) => void;
   onEscape?: (event: KeyboardEvent<HTMLInputElement>) => void;
+  onChangeValue?: (newValue: string) => void;
   onUpdate?: (newValue: string) => void;
   focused?: boolean;
 };
@@ -36,6 +37,7 @@ export function Input({
   inputRef,
   onEnter,
   onEscape,
+  onChangeValue,
   onUpdate,
   focused,
   ...nativeProps
@@ -73,10 +75,12 @@ export function Input({
 
         nativeProps.onKeyDown?.(e);
       }}
+      onBlur={e => {
+        onUpdate?.(e.target.value);
+        nativeProps.onBlur?.(e);
+      }}
       onChange={e => {
-        if (onUpdate) {
-          onUpdate(e.target.value);
-        }
+        onChangeValue?.(e.target.value);
         nativeProps.onChange?.(e);
       }}
     />

packages/desktop-client/src/components/common/Search.tsx

@@ -1,5 +1,5 @@
 // @ts-strict-ignore
-import { type ChangeEvent, type Ref } from 'react';
+import { type Ref } from 'react';
 
 import { SvgRemove, SvgSearchAlternate } from '../../icons/v2';
 import { theme } from '../../style';
@@ -83,7 +83,7 @@ export function Search({
       onKeyDown={e => {
         if (e.key === 'Escape') onChange('');
       }}
-      onChange={(e: ChangeEvent<HTMLInputElement>) => onChange(e.target.value)}
+      onChangeValue={value => onChange(value)}
     />
   );
 }

packages/desktop-client/src/components/filters/NameFilter.tsx

@@ -53,7 +53,7 @@ export function NameFilter({
                 id="name-field"
                 inputRef={inputRef}
                 defaultValue={name || ''}
-                onUpdate={setName}
+                onChangeValue={setName}
               />
             </FormField>
             <Button

packages/desktop-client/src/components/manager/ConfigServer.tsx

@@ -138,7 +138,7 @@ export function ConfigServer() {
           autoFocus={true}
           placeholder="https://example.com"
           value={url || ''}
-          onUpdate={setUrl}
+          onChangeValue={setUrl}
           style={{ flex: 1, marginRight: 10 }}
         />
         <ButtonWithLoading

packages/desktop-client/src/components/mobile/MobileAmountInput.jsx

@@ -163,10 +163,6 @@ export const FocusableAmountInput = memo(function FocusableAmountInput({
     props.onUpdate?.(maybeApplyNegative(val, isNegative));
   };
 
-  const onChange = val => {
-    props.onChange?.(maybeApplyNegative(val, isNegative));
-  };
-
   return (
     <View>
       <AmountInput
@@ -174,7 +170,6 @@ export const FocusableAmountInput = memo(function FocusableAmountInput({
         value={value}
         onFocus={onFocus}
         onBlur={onBlur}
-        onChange={onChange}
         onUpdate={onUpdate}
         focused={focused}
         style={{

packages/desktop-client/src/components/mobile/MobileForms.jsx

@@ -47,9 +47,7 @@ export const InputField = forwardRef(function InputField(
       autoCorrect="false"
       autoCapitalize="none"
       disabled={disabled}
-      onBlur={e => {
-        onUpdate?.(e.target.value);
-      }}
+      onUpdate={onUpdate}
       style={{
         ...valueStyle,
         ...style,

packages/desktop-client/src/components/modals/GoCardlessInitialise.tsx

@@ -73,8 +73,10 @@ export const GoCardlessInitialise = ({
             id="secret-id-field"
             type="password"
             value={secretId}
-            onUpdate={setSecretId}
-            onChange={() => setIsValid(true)}
+            onChangeValue={value => {
+              setSecretId(value);
+              setIsValid(true);
+            }}
           />
         </FormField>
 
@@ -84,8 +86,10 @@ export const GoCardlessInitialise = ({
             id="secret-key-field"
             type="password"
             value={secretKey}
-            onUpdate={setSecretKey}
-            onChange={() => setIsValid(true)}
+            onChangeValue={value => {
+              setSecretKey(value);
+              setIsValid(true);
+            }}
           />
         </FormField>
 

packages/desktop-client/src/components/modals/ImportTransactions.jsx

@@ -544,7 +544,7 @@ function MultiplierOption({
         style={{ display: multiplierEnabled ? 'inherit' : 'none' }}
         value={multiplierAmount}
         placeholder="Multiplier"
-        onUpdate={onChangeAmount}
+        onChangeValue={onChangeAmount}
       />
     </View>
   );
@@ -573,7 +573,7 @@ function InOutOption({
         <Input
           type="text"
           value={outValue}
-          onUpdate={onChangeText}
+          onChangeValue={onChangeText}
           placeholder="Value for out rows, i.e. Credit"
         />
       )}

packages/desktop-client/src/components/modals/SimpleFinInitialise.tsx

@@ -66,8 +66,10 @@ export const SimpleFinInitialise = ({
             id="token-field"
             type="password"
             value={token}
-            onUpdate={setToken}
-            onChange={() => setIsValid(true)}
+            onChangeValue={value => {
+              setToken(value);
+              setIsValid(true);
+            }}
           />
         </FormField>
 

packages/desktop-client/src/components/modals/SingleInput.tsx

@@ -56,7 +56,8 @@ export function SingleInput({
                 <Input
                   placeholder={inputPlaceholder}
                   style={{ ...styles.mediumText }}
-                  onUpdate={setValue}
+                  value={value}
+                  onChangeValue={setValue}
                   onEnter={e => _onSubmit(e.currentTarget.value)}
                 />
               </InitialFocus>

packages/desktop-client/src/components/reports/SaveReportName.tsx

@@ -64,7 +64,7 @@ export function SaveReportName({
                 value={name}
                 id="name-field"
                 inputRef={inputRef}
-                onUpdate={setName}
+                onChangeValue={setName}
                 style={{ marginTop: 10 }}
               />
             </FormField>

packages/desktop-client/src/components/table.tsx

@@ -319,7 +319,6 @@ function InputValue({
   const [value, setValue] = useState(defaultValue);
 
   function onBlur_(e) {
-    onUpdate?.(value);
     if (onBlur) {
       fireBlur(onBlur, e);
     }
@@ -345,8 +344,9 @@ function InputValue({
     <Input
       {...props}
       value={value}
-      onUpdate={text => setValue(text)}
+      onChangeValue={text => setValue(text)}
       onBlur={onBlur_}
+      onUpdate={onUpdate}
       onKeyDown={onKeyDown}
       style={{
         ...inputCellStyle,
@@ -358,8 +358,8 @@ function InputValue({
 }
 
 type InputCellProps = ComponentProps<typeof Cell> & {
-  inputProps: ComponentProps<typeof InputValue>;
-  onUpdate: ComponentProps<typeof InputValue>['onUpdate'];
+  inputProps?: ComponentProps<typeof InputValue>;
+  onUpdate?: ComponentProps<typeof InputValue>['onUpdate'];
   onBlur?: ComponentProps<typeof InputValue>['onBlur'];
   textAlign?: CSSProperties['textAlign'];
   error?: ReactNode;

packages/desktop-client/src/components/util/AmountInput.tsx

@@ -23,7 +23,7 @@ type AmountInputProps = {
   inputRef?: Ref<HTMLInputElement>;
   value: number;
   zeroSign?: '-' | '+';
-  onChange?: (value: string) => void;
+  onChangeValue?: (value: string) => void;
   onFocus?: FocusEventHandler<HTMLInputElement>;
   onBlur?: FocusEventHandler<HTMLInputElement>;
   onUpdate?: (amount: number) => void;
@@ -40,7 +40,7 @@ export function AmountInput({
   zeroSign = '-', // + or -
   onFocus,
   onBlur,
-  onChange,
+  onChangeValue,
   onUpdate,
   style,
   textStyle,
@@ -77,7 +77,7 @@ export function AmountInput({
 
   function onInputTextChange(val) {
     setValue(val ? val : '');
-    onChange?.(val);
+    onChangeValue?.(val);
   }
 
   function fireUpdate(negate) {
@@ -123,7 +123,7 @@ export function AmountInput({
           fireUpdate(negative);
         }
       }}
-      onUpdate={onInputTextChange}
+      onChangeValue={onInputTextChange}
       onBlur={onInputAmountBlur}
       onFocus={onFocus}
     />

upcoming-release-notes/2381.md

@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [joel-jeremy]
+---
+
+Update Input onChangeValue and onUpdate prop naming for consistency.