Skip to content

Conversation

seabeeberry
Copy link
Contributor

@seabeeberry seabeeberry commented Jun 30, 2025

When quickly typing into the filter input and pressing Enter, the entered value was not always correctly applied. Sometimes it resulted in an empty filter being created. In my test it ocurred for other types of filters as well, not only for "has tag(s)".

Updated the GenericInput component to add onChangeValue={onChange}, as suggested by @mauschil. Changed the defaultValue to value.

Now, however quickly you type a filter name and press Enter, your inputted value is correctly applied.

@actual-github-bot actual-github-bot bot changed the title Fixes #5228 - has tag(s) filter now takes values when typing quickly [WIP] Fixes #5228 - has tag(s) filter now takes values when typing quickly Jun 30, 2025
Copy link

netlify bot commented Jun 30, 2025

Deploy Preview for actualbudget ready!

Name Link
🔨 Latest commit 81bf90e
🔍 Latest deploy log https://app.netlify.com/projects/actualbudget/deploys/6862f522b7b45c0008201c40
😎 Deploy Preview https://deploy-preview-5263.demo.actualbudget.org
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Copy link
Contributor

github-actions bot commented Jun 30, 2025

Bundle Stats — desktop-client

Hey there, this message comes from a GitHub action that helps you and reviewers to understand how these changes affect the size of this project's bundle.

As this PR is updated, I'll keep you updated on how the bundle size is impacted.

Total

Files count Total bundle size % Changed
20 10.09 MB → 10.09 MB (-128 B) -0.00%
Changeset
File Δ Size
src/components/util/GenericInput.jsx 📉 -128 B (-2.04%) 6.12 kB → 6 kB
View detailed bundle breakdown

Added

No assets were added

Removed

No assets were removed

Bigger

No assets were bigger

Smaller

Asset File Size % Changed
static/js/index.js 7.58 MB → 7.58 MB (-128 B) -0.00%

Unchanged

Asset File Size % Changed
static/js/de.js 134.45 kB 0%
static/js/en-GB.js 6.38 kB 0%
static/js/en.js 121.16 kB 0%
static/js/es.js 70.83 kB 0%
static/js/fr.js 131.54 kB 0%
static/js/nl.js 100.34 kB 0%
static/js/pt-BR.js 124.38 kB 0%
static/js/sv.js 65.13 kB 0%
static/js/th.js 190.63 kB 0%
static/js/uk.js 121.11 kB 0%
static/js/indexeddb-main-thread-worker-e59fee74.js 12.94 kB 0%
static/js/workbox-window.prod.es5.js 5.64 kB 0%
static/js/resize-observer.js 18.37 kB 0%
static/js/BackgroundImage.js 122.29 kB 0%
static/js/ReportRouter.js 820.13 kB 0%
static/js/narrow.js 392.44 kB 0%
static/js/wide.js 115.17 kB 0%
static/js/TransactionList.js 10.92 kB 0%
static/js/useAccountPreviewTransactions.js 3.15 kB 0%

Copy link
Contributor

github-actions bot commented Jun 30, 2025

Bundle Stats — loot-core

Hey there, this message comes from a GitHub action that helps you and reviewers to understand how these changes affect the size of this project's bundle.

As this PR is updated, I'll keep you updated on how the bundle size is impacted.

Total

Files count Total bundle size % Changed
1 2.25 MB 0%

Changeset

No files were changed

View detailed bundle breakdown

Added

No assets were added

Removed

No assets were removed

Bigger

No assets were bigger

Smaller

No assets were smaller

Unchanged

Asset File Size % Changed
kcab.worker.js 2.25 MB 0%

@seabeeberry seabeeberry changed the title [WIP] Fixes #5228 - has tag(s) filter now takes values when typing quickly [WIP] Fixes #5228 - has tag(s) filter now takes values when pressing Enter Jun 30, 2025
@seabeeberry seabeeberry changed the title [WIP] Fixes #5228 - has tag(s) filter now takes values when pressing Enter Fixes #5228 - has tag(s) filter now takes values when pressing Enter Jun 30, 2025
Copy link
Contributor

coderabbitai bot commented Jun 30, 2025

Walkthrough

The changes update the usage of the Input component in the GenericInput.jsx file by replacing the defaultValue prop with the value prop, transitioning the inputs from uncontrolled to controlled components. The event handlers onEnter and onUpdate are consolidated into a single onChangeValue handler, which invokes the onChange callback directly. These updates are applied throughout the file, including within the getNumberInputByFormatType function and various switch cases for different input types and subfields. No changes are made to the exported function signatures.

Suggested labels

:sparkles: merged


📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 77f510e and 81bf90e.

📒 Files selected for processing (1)
  • packages/desktop-client/src/components/util/GenericInput.jsx (4 hunks)
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: misu-dev
PR: actualbudget/actual#5167
File: packages/desktop-client/src/components/spreadsheet/useFormat.ts:64-72
Timestamp: 2025-06-16T17:45:40.807Z
Learning: The user misu-dev prefers strict type checking for financial format types in useFormat.ts as a long-term goal, but acknowledges that creating follow-up issues for cleanup should wait until after the current PR is merged, not during the development phase.
Learnt from: jfdoming
PR: actualbudget/actual#4810
File: packages/desktop-client/src/components/budget/goals/BudgetAutomationEditor.tsx:0-0
Timestamp: 2025-04-15T01:42:52.432Z
Learning: In the BudgetAutomation feature, GenericInput needs to be updated to support ID attributes for accessibility, which will be done in a separate PR.
Learnt from: tlesicka
PR: actualbudget/actual#3593
File: packages/desktop-client/src/components/sidebar/BudgetName.tsx:114-136
Timestamp: 2024-10-16T03:51:04.683Z
Learning: In 'packages/desktop-client/src/components/sidebar/BudgetName.tsx', empty budget names are handled elsewhere, so additional error handling within the 'EditableBudgetName' component is unnecessary.
Learnt from: lelemm
PR: actualbudget/actual#3732
File: packages/desktop-client/src/components/util/AmountInput.tsx:102-108
Timestamp: 2024-10-24T18:57:16.406Z
Learning: In `packages/desktop-client/src/components/util/AmountInput.tsx`, zero amounts are handled in the `onSwitch` function, so zero amounts are intentionally ignored in the `fireUpdate` function.
Learnt from: tlesicka
PR: actualbudget/actual#3689
File: packages/desktop-client/src/components/modals/manager/DuplicateFileModal.tsx:181-196
Timestamp: 2024-10-22T11:55:03.192Z
Learning: In `DuplicateFileModal.tsx`, `trim()` is performed during the blur event when validating `newName`, so additional trimming is not necessary in the `onPress` handlers.
Learnt from: tlesicka
PR: actualbudget/actual#3689
File: packages/desktop-client/src/components/modals/manager/DuplicateFileModal.tsx:181-196
Timestamp: 2024-10-22T11:55:03.192Z
Learning: After refactoring `nameError` in `DuplicateFileModal.tsx`, it's not necessary to use `setNameError` in the `onPress` handlers when validation fails.
Learnt from: misu-dev
PR: actualbudget/actual#5167
File: packages/desktop-client/src/components/spreadsheet/useFormat.ts:64-72
Timestamp: 2025-06-16T17:41:34.452Z
Learning: The format function in useFormat.ts is widely used across the application and currently needs to accept both string and number inputs for financial format types. While strict type checking is preferred long-term, string parsing is maintained as a pragmatic compromise during the currency feature development phase.
Learnt from: MatissJanis
PR: actualbudget/actual#3544
File: packages/loot-core/src/client/state-types/prefs.d.ts:13-18
Timestamp: 2024-10-02T14:56:29.404Z
Learning: When action types like `SetPrefsAction` are updated with new properties, ensure that reducers are correctly handling these properties before suggesting a potential issue.
Learnt from: misu-dev
PR: actualbudget/actual#5167
File: packages/desktop-client/src/components/spreadsheet/useFormat.ts:60-66
Timestamp: 2025-06-16T17:15:16.326Z
Learning: The user prefers that financial format types in useFormat.ts should not accept string inputs, maintaining strict type checking. The expectation is that only numbers should be passed to financial format cases, and type checks may be unnecessary if this contract is enforced.
Learnt from: tlesicka
PR: actualbudget/actual#3689
File: packages/desktop-client/src/components/modals/manager/DuplicateFileModal.tsx:93-94
Timestamp: 2024-10-24T05:04:37.527Z
Learning: In the `onBlur` handler, it's unnecessary to call `setNewName` with the trimmed value because `validateAndSetName` already calls `setNewName` with the trimmed name.
Learnt from: matt-fidd
PR: actualbudget/actual#4955
File: packages/component-library/src/Input.tsx:52-64
Timestamp: 2025-05-22T05:17:51.422Z
Learning: React 19 has simplified ref handling, eliminating the need for `React.forwardRef()` in functional components. Components can now receive and destructure the ref directly from props rather than requiring the second parameter in forwardRef.
packages/desktop-client/src/components/util/GenericInput.jsx (13)
Learnt from: lelemm
PR: actualbudget/actual#3732
File: packages/desktop-client/src/components/util/AmountInput.tsx:102-108
Timestamp: 2024-10-24T18:57:16.406Z
Learning: In `packages/desktop-client/src/components/util/AmountInput.tsx`, zero amounts are handled in the `onSwitch` function, so zero amounts are intentionally ignored in the `fireUpdate` function.
Learnt from: jfdoming
PR: actualbudget/actual#4810
File: packages/desktop-client/src/components/budget/goals/BudgetAutomationEditor.tsx:0-0
Timestamp: 2025-04-15T01:42:52.432Z
Learning: In the BudgetAutomation feature, GenericInput needs to be updated to support ID attributes for accessibility, which will be done in a separate PR.
Learnt from: tlesicka
PR: actualbudget/actual#3689
File: packages/desktop-client/src/components/modals/manager/DuplicateFileModal.tsx:181-196
Timestamp: 2024-10-22T11:55:03.192Z
Learning: In `DuplicateFileModal.tsx`, `trim()` is performed during the blur event when validating `newName`, so additional trimming is not necessary in the `onPress` handlers.
Learnt from: tlesicka
PR: actualbudget/actual#3593
File: packages/desktop-client/src/components/sidebar/BudgetName.tsx:114-136
Timestamp: 2024-10-16T03:51:04.683Z
Learning: In 'packages/desktop-client/src/components/sidebar/BudgetName.tsx', empty budget names are handled elsewhere, so additional error handling within the 'EditableBudgetName' component is unnecessary.
Learnt from: tlesicka
PR: actualbudget/actual#3689
File: packages/desktop-client/src/components/modals/manager/DuplicateFileModal.tsx:181-196
Timestamp: 2024-10-22T11:55:03.192Z
Learning: After refactoring `nameError` in `DuplicateFileModal.tsx`, it's not necessary to use `setNameError` in the `onPress` handlers when validation fails.
Learnt from: lelemm
PR: actualbudget/actual#3309
File: packages/desktop-client/src/components/ColumnWidthContext.jsx:17-17
Timestamp: 2024-10-25T18:30:24.287Z
Learning: In `packages/desktop-client/src/components/ColumnWidthContext.jsx`, replacing `useState` with `useRef` for `positionAccumulator` causes the resize action to become unpredictable. Therefore, it's preferable to keep using `useState` for `positionAccumulator` in this context.
Learnt from: csenel
PR: actualbudget/actual#3810
File: packages/desktop-client/src/components/transactions/SelectedTransactionsButton.tsx:150-161
Timestamp: 2024-11-09T20:18:28.468Z
Learning: In `packages/desktop-client/src/components/transactions/SelectedTransactionsButton.tsx`, prefer to keep the implementation of checks consistent with similar patterns elsewhere in the codebase, even if alternative implementations are more concise.
Learnt from: joel-jeremy
PR: actualbudget/actual#3685
File: packages/desktop-client/src/components/accounts/Account.tsx:655-665
Timestamp: 2024-10-24T17:05:41.415Z
Learning: The Account component in 'packages/desktop-client/src/components/accounts/Account.tsx' is being rewritten in a separate PR.
Learnt from: minajevs
PR: actualbudget/actual#3274
File: packages/desktop-client/src/components/mobile/transactions/TransactionEdit.jsx:0-0
Timestamp: 2024-10-14T09:03:37.410Z
Learning: In `packages/desktop-client/src/components/mobile/transactions/TransactionEdit.jsx`, within the `onEditField` function, the `unserializedTransaction` variable is always expected to be found when accessing its properties. Adding a null check may not be necessary.
Learnt from: MatissJanis
PR: actualbudget/actual#3544
File: packages/loot-core/src/client/state-types/prefs.d.ts:13-18
Timestamp: 2024-10-02T14:56:29.404Z
Learning: When action types like `SetPrefsAction` are updated with new properties, ensure that reducers are correctly handling these properties before suggesting a potential issue.
Learnt from: matt-fidd
PR: actualbudget/actual#4955
File: packages/component-library/src/Input.tsx:52-64
Timestamp: 2025-05-22T05:17:51.422Z
Learning: In React 19, function components can receive refs directly through props without requiring React.forwardRef(). This simplified ref forwarding feature allows directly destructuring the ref prop and passing it along to DOM elements or other components.
Learnt from: matt-fidd
PR: actualbudget/actual#4955
File: packages/component-library/src/Input.tsx:52-64
Timestamp: 2025-05-22T05:17:51.422Z
Learning: React 19 has simplified ref handling, eliminating the need for `React.forwardRef()` in functional components. Components can now receive and destructure the ref directly from props rather than requiring the second parameter in forwardRef.
Learnt from: matt-fidd
PR: actualbudget/actual#5206
File: packages/desktop-client/src/components/Titlebar.tsx:63-63
Timestamp: 2025-06-21T04:04:01.231Z
Learning: In react-i18next Trans components, double curly braces `{{ }}` are the correct syntax for interpolation placeholders, not JSX object literals. For example: `<Trans count={value}>{{ value }} items</Trans>` is the proper way to interpolate values within translation strings.
🧬 Code Graph Analysis (1)
packages/desktop-client/src/components/util/GenericInput.jsx (1)
packages/loot-core/src/shared/months.ts (1)
  • getMonthYearFormat (452-460)
🔇 Additional comments (4)
packages/desktop-client/src/components/util/GenericInput.jsx (4)

67-69: LGTM: Input converted to controlled component correctly.

The change from defaultValue to value and consolidation of event handlers into onChangeValue properly addresses the original issue where fast typing + Enter key didn't capture the latest input value.


192-194: LGTM: Date month input consistently converted to controlled component.

The transformation follows the same pattern as other Input components, ensuring consistent behavior across all input types.


203-205: LGTM: Date year input consistently converted to controlled component.

The change maintains consistency with the other Input component transformations in this file.


262-264: LGTM: Default case Input properly converted to controlled component.

The final transformation completes the consistent pattern of converting all basic Input components from uncontrolled to controlled, ensuring the fix applies comprehensively throughout the GenericInput component.

✨ Finishing Touches
  • 📝 Generate Docstrings

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Explain this complex logic.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@seabeeberry seabeeberry changed the title Fixes #5228 - has tag(s) filter now takes values when pressing Enter [WIP] Bugfix #5228 - has tag(s) filter now takes values when pressing Enter Jun 30, 2025
@mauschil
Copy link
Contributor

I think this fix works around the issue instead of addressing the underlying issue in the Input.tsx component itself.
The Input component seems to only update the value if onBlur is triggered. That works for the Apply button as the state updates just beforehand, however, if pressing enter, the submit gets triggered before the state update.

Would you consider adding the onChangeValue={onChange} inside the GenericInput? That way the state gets updated directly with each key stroke.

@seabeeberry
Copy link
Contributor Author

I think this fix works around the issue instead of addressing the underlying issue in the Input.tsx component itself. The Input component seems to only update the value if onBlur is triggered. That works for the Apply button as the state updates just beforehand, however, if pressing enter, the submit gets triggered before the state update.

Would you consider adding the onChangeValue={onChange} inside the GenericInput? That way the state gets updated directly with each key stroke.

You are right! I changed it now within GenericInput.jsx. Was I correct to change it for every possible Input component? Sorry, this is my first contribution to a project.

@seabeeberry seabeeberry changed the title [WIP] Bugfix #5228 - has tag(s) filter now takes values when pressing Enter Fixes #5228 - has tag(s) filter now takes values when pressing Enter Jun 30, 2025
@youngcw youngcw merged commit 9a6afda into actualbudget:master Jul 3, 2025
24 checks passed
@seabeeberry seabeeberry deleted the fix/5228-has-tags-filter-empty branch July 3, 2025 21:17
passabilities added a commit to passabilities/actual-budget that referenced this pull request Jul 8, 2025
…raph

* actual/master: (113 commits)
  Customize tags colors (actualbudget#5032)
  Run rules on transactions created by a transfer. (actualbudget#5279)
  add notes to scheduled transactions table (actualbudget#5290)
  💬 Added Discord link to the help menu for discoverability (actualbudget#5286)
  Fixes actualbudget#5278: Applied PrivacyFilter to balance graph display (and added conditionality whether user is hovering on the graph) (actualbudget#5281)
  add some basic linting rules for translation consistency (actualbudget#5212)
  Update contributor points calculation logic (actualbudget#5169)
  feat(currency): add currency setting and format (actualbudget#5167)
  Move remaining `.d.ts` files to `.ts` (actualbudget#5208)
  use correct running balance when adding a new transaction (actualbudget#5207)
  Fix rule templating on date causing crash (actualbudget#5259)
  Fixes actualbudget#5228 - has tag(s) filter now takes values when pressing Enter (actualbudget#5263)
  correctly ignore hidden categories when using "Set Average Budget" (actualbudget#5239)
  Mobile running balance (actualbudget#5219)
  🔖 (25.7.1) (actualbudget#5272)
  fix (actualbudget#5270)
  🔖 (25.7.0) (actualbudget#5260)
  Fixes actualbudget#5238 last synced button text not visible on light theme. (actualbudget#5241)
  fix: Tracking budget income budget fields missing in mobile view  (actualbudget#5251)
  Fix switching budget type requiring hard reload to take effect (actualbudget#5253)
  ...
passabilities added a commit to passabilities/actual-budget that referenced this pull request Jul 9, 2025
…raph

* actual/master: (120 commits)
  [Goals] limits for remainders (actualbudget#5301)
  Reword the overspending banner for tracking budget. (actualbudget#5307)
  Fix a few typos mentioned on Weblate (actualbudget#5211)
  no hidden (actualbudget#5305)
  [Goals] upgrade week template to be a periodic template (actualbudget#5295)
  [Goals] Round template amounts if hide decimals is set (actualbudget#5288)
  :electron:  Fix early server-started signification message (actualbudget#5303)
  Customize tags colors (actualbudget#5032)
  Run rules on transactions created by a transfer. (actualbudget#5279)
  add notes to scheduled transactions table (actualbudget#5290)
  💬 Added Discord link to the help menu for discoverability (actualbudget#5286)
  Fixes actualbudget#5278: Applied PrivacyFilter to balance graph display (and added conditionality whether user is hovering on the graph) (actualbudget#5281)
  add some basic linting rules for translation consistency (actualbudget#5212)
  Update contributor points calculation logic (actualbudget#5169)
  feat(currency): add currency setting and format (actualbudget#5167)
  Move remaining `.d.ts` files to `.ts` (actualbudget#5208)
  use correct running balance when adding a new transaction (actualbudget#5207)
  Fix rule templating on date causing crash (actualbudget#5259)
  Fixes actualbudget#5228 - has tag(s) filter now takes values when pressing Enter (actualbudget#5263)
  correctly ignore hidden categories when using "Set Average Budget" (actualbudget#5239)
  ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug]: "has tag(s)" filter does not take values when pressing Enter on keyboard instead of clicking Apply
3 participants