feat: make journal auto-adjustment for entries.

feat: auto-focus cells inside the table.

client/src/components/DataTableCells/AccountsListFieldCell.js

@@ -1,11 +1,14 @@
-import React, { useCallback, useMemo } from 'react';
-import AccountsSuggestField from 'components/AccountsSuggestField';
-// import AccountsSelectList from 'components/AccountsSelectList';
+import React, { useRef, useCallback, useMemo } from 'react';
 import classNames from 'classnames';
+import { useCellAutoFocus } from 'hooks';
+
+import AccountsSuggestField from 'components/AccountsSuggestField';
+
+// import AccountsSelectList from 'components/AccountsSelectList';
 import { FormGroup, Classes, Intent } from '@blueprintjs/core';
 
 // Account cell renderer.
-const AccountCellRenderer = ({
+export default function AccountCellRenderer({
   column: {
     id,
     accountsDataProp,
@@ -18,9 +21,14 @@ const AccountCellRenderer = ({
     accounts: defaultAccounts,
     updateData,
     errors,
+    autoFocus,
     ...restPayloadProps
   },
-}) => {
+}) {
+  const accountRef = useRef();
+
+  useCellAutoFocus(accountRef, autoFocus, id, index);
+
   const handleAccountSelected = useCallback(
     (account) => {
       updateData(index, id, account.id);
@@ -49,9 +57,12 @@ const AccountCellRenderer = ({
         selectedAccountId={initialValue}
         filterByRootTypes={filterAccountsByRootType}
         filterByTypes={filterAccountsByTypes}
+        inputProps={{
+          inputRef: (ref) => (accountRef.current = ref),
+        }}
+        openOnKeyDown={true}
+        blurOnSelectClose={false}
       />
     </FormGroup>
   );
-};
-
-export default AccountCellRenderer;
+}

client/src/components/DataTableCells/ItemsListCell.js

@@ -1,15 +1,23 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useRef } from 'react';
 // import ItemsListField from 'components/ItemsListField';
 import ItemsSuggestField from 'components/ItemsSuggestField';
 import classNames from 'classnames';
+
 import { FormGroup, Classes, Intent } from '@blueprintjs/core';
 
+import { useCellAutoFocus } from 'hooks';
+
 export default function ItemsListCell({
   column: { id, filterSellable, filterPurchasable },
   row: { index },
   cell: { value: initialValue },
-  payload: { items, updateData, errors },
+  payload: { items, updateData, errors, autoFocus },
 }) {
+  const fieldRef = useRef();
+
+  // Auto-focus the items list input field.
+  useCellAutoFocus(fieldRef, autoFocus, id, index);
+
   const handleItemSelected = useCallback(
     (item) => {
       updateData(index, id, item.id);
@@ -30,6 +38,11 @@ export default function ItemsListCell({
         selectedItemId={initialValue}
         sellable={filterSellable}
         purchasable={filterPurchasable}
+        inputProps={{
+          inputRef: (ref) => (fieldRef.current = ref),
+        }}
+        openOnKeyDown={true}
+        blurOnSelectClose={false}
       />
     </FormGroup>
   );