♻️ removing 'focused' prop from generic Input component

Author: MatissJanis

packages/desktop-client/src/components/accounts/Reconcile.tsx

@@ -2,9 +2,11 @@ import React, { useState } from 'react';
 import { Trans } from 'react-i18next';
 
 import { Button } from '@actual-app/components/button';
+import { SvgCheckCircle1 } from '@actual-app/components/icons/v2';
 import { InitialFocus } from '@actual-app/components/initial-focus';
 import { styles } from '@actual-app/components/styles';
 import { Text } from '@actual-app/components/text';
+import { theme } from '@actual-app/components/theme';
 import { View } from '@actual-app/components/view';
 
 import * as queries from 'loot-core/client/queries';
@@ -13,8 +15,6 @@ import { currencyToInteger } from 'loot-core/shared/util';
 import { type AccountEntity } from 'loot-core/types/models';
 import { type TransObjectLiteral } from 'loot-core/types/util';
 
-import { SvgCheckCircle1 } from '../../icons/v2';
-import { theme } from '../../style';
 import { Input } from '../common/Input';
 import { useFormat } from '../spreadsheet/useFormat';
 import { useSheetValue } from '../spreadsheet/useSheetValue';
@@ -133,11 +133,9 @@ export function ReconcileMenu({
   });
   const format = useFormat();
   const [inputValue, setInputValue] = useState<string | null>(null);
-  const [inputFocused, setInputFocused] = useState(false);
 
   function onSubmit() {
     if (inputValue === '') {
-      setInputFocused(true);
       return;
     }
 
@@ -162,7 +160,6 @@ export function ReconcileMenu({
             defaultValue={format(clearedBalance, 'financial')}
             onChangeValue={setInputValue}
             style={{ margin: '7px 0' }}
-            focused={inputFocused}
             onEnter={onSubmit}
           />
         </InitialFocus>

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

@@ -2,16 +2,12 @@ import React, {
   type InputHTMLAttributes,
   type KeyboardEvent,
   type Ref,
-  useRef,
 } from 'react';
 
-import { styles } from '@actual-app/components/styles';
+import { styles, type CSSProperties } from '@actual-app/components/styles';
+import { theme } from '@actual-app/components/theme';
 import { css, cx } from '@emotion/css';
 
-import { useMergedRefs } from '../../hooks/useMergedRefs';
-import { useProperFocus } from '../../hooks/useProperFocus';
-import { theme, type CSSProperties } from '../../style';
-
 export const defaultInputStyle = {
   outline: 0,
   backgroundColor: theme.tableBackground,
@@ -29,7 +25,6 @@ type InputProps = InputHTMLAttributes<HTMLInputElement> & {
   onEscape?: (event: KeyboardEvent<HTMLInputElement>) => void;
   onChangeValue?: (newValue: string) => void;
   onUpdate?: (newValue: string) => void;
-  focused?: boolean;
 };
 
 export function Input({
@@ -39,18 +34,12 @@ export function Input({
   onEscape,
   onChangeValue,
   onUpdate,
-  focused,
   className,
   ...nativeProps
 }: InputProps) {
-  const ref = useRef<HTMLInputElement>(null);
-  useProperFocus(ref, focused);
-
-  const mergedRef = useMergedRefs<HTMLInputElement>(ref, inputRef);
-
   return (
     <input
-      ref={mergedRef}
+      ref={inputRef}
       className={cx(
         css(
           defaultInputStyle,

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

@@ -13,6 +13,7 @@ type InputWithContentProps = ComponentProps<typeof Input> & {
   focusStyle?: CSSProperties;
   style?: CSSProperties;
   getStyle?: (focused: boolean) => CSSProperties;
+  focused?: boolean;
 };
 export function InputWithContent({
   leftContent,
@@ -43,7 +44,6 @@ export function InputWithContent({
       {leftContent}
       <Input
         {...props}
-        focused={focused}
         style={{
           width: '100%',
           ...inputStyle,

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

@@ -422,7 +422,6 @@ export function ModalTitle({
         textAlign: 'center',
         ...style,
       }}
-      focused={isEditing}
       defaultValue={title}
       onUpdate={_onTitleUpdate}
       onKeyDown={e => {

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

@@ -7,6 +7,7 @@ import React, {
 import { useTranslation } from 'react-i18next';
 
 import { Button } from '@actual-app/components/button';
+import { theme } from '@actual-app/components/theme';
 import { View } from '@actual-app/components/view';
 import { parseISO, format as formatDate, parse as parseDate } from 'date-fns';
 
@@ -15,7 +16,6 @@ import { currentDay, dayFromDate } from 'loot-core/shared/months';
 import { amountToInteger } from 'loot-core/shared/util';
 
 import { useDateFormat } from '../../hooks/useDateFormat';
-import { theme } from '../../style';
 import { Input } from '../common/Input';
 import { Modal, ModalCloseButton, ModalHeader } from '../common/Modal';
 import { SectionLabel } from '../forms';
@@ -82,7 +82,6 @@ export function EditFieldModal({
         <DateSelect
           value={formatDate(parseISO(today), dateFormat)}
           dateFormat={dateFormat}
-          focused={true}
           embedded={true}
           onUpdate={() => {}}
           onSelect={date => {
@@ -205,7 +204,6 @@ export function EditFieldModal({
           <Input
             inputRef={noteInputRef}
             autoFocus
-            focused={true}
             onEnter={e => {
               onSelectNote(e.currentTarget.value, noteAmend);
               close();
@@ -220,7 +218,6 @@ export function EditFieldModal({
       label = t('Amount');
       editor = ({ close }) => (
         <Input
-          focused={true}
           onEnter={e => {
             onSelect(e.currentTarget.value);
             close();

packages/desktop-client/src/components/select/DateSelect.tsx

@@ -13,7 +13,8 @@ import React, {
 } from 'react';
 
 import { Popover } from '@actual-app/components/popover';
-import { styles } from '@actual-app/components/styles';
+import { styles, type CSSProperties } from '@actual-app/components/styles';
+import { theme } from '@actual-app/components/theme';
 import { View } from '@actual-app/components/view';
 import { css } from '@emotion/css';
 import { parse, parseISO, format, subDays, addDays, isValid } from 'date-fns';
@@ -31,7 +32,6 @@ import {
 
 import { useLocale } from '../../hooks/useLocale';
 import { useSyncedPref } from '../../hooks/useSyncedPref';
-import { theme, type CSSProperties } from '../../style';
 import { Input } from '../common/Input';
 
 import DateSelectLeft from './DateSelect.left.png';
@@ -223,7 +223,6 @@ type DateSelectProps = {
   isOpen?: boolean;
   embedded?: boolean;
   dateFormat: string;
-  focused?: boolean;
   openOnFocus?: boolean;
   inputRef?: MutableRefObject<HTMLInputElement>;
   shouldSaveFromKey?: (e: KeyboardEvent<HTMLInputElement>) => boolean;
@@ -240,7 +239,6 @@ export function DateSelect({
   isOpen,
   embedded,
   dateFormat = 'yyyy-MM-dd',
-  focused,
   openOnFocus = true,
   inputRef: originalInputRef,
   shouldSaveFromKey = defaultShouldSaveFromKey,
@@ -391,7 +389,6 @@ export function DateSelect({
     <View {...containerProps}>
       <Input
         id={id}
-        focused={focused}
         {...inputProps}
         inputRef={inputRef}
         value={value}

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

@@ -11,15 +11,15 @@ import React, {
 import { useTranslation } from 'react-i18next';
 
 import { Button } from '@actual-app/components/button';
+import { SvgAdd, SvgSubtract } from '@actual-app/components/icons/v1';
+import { theme } from '@actual-app/components/theme';
 import { View } from '@actual-app/components/view';
 
 import { evalArithmetic } from 'loot-core/shared/arithmetic';
 import { amountToInteger, appendDecimals } from 'loot-core/shared/util';
 
 import { useMergedRefs } from '../../hooks/useMergedRefs';
 import { useSyncedPref } from '../../hooks/useSyncedPref';
-import { SvgAdd, SvgSubtract } from '../../icons/v1';
-import { theme } from '../../style';
 import { InputWithContent } from '../common/InputWithContent';
 import { useFormat } from '../spreadsheet/useFormat';
 
@@ -138,7 +138,6 @@ export function AmountInput({
       }
       value={value}
       disabled={disabled}
-      focused={focused}
       style={{ flex: 1, alignItems: 'stretch', ...style }}
       inputStyle={inputStyle}
       onKeyUp={e => {

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

@@ -108,7 +108,6 @@ export function PercentInput({
       inputMode="decimal"
       value={value}
       disabled={disabled}
-      focused={focused}
       style={{ flex: 1, alignItems: 'stretch', ...style }}
       onKeyUp={e => {
         if (e.key === 'Enter') {

upcoming-release-notes/4557.md

@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [MatissJanis]
+---
+
+Removing `focused` prop (that does nothing) from common `Input` component.