React Aria Button on Autocomplete and Filters

[joel-jeremy]

No description provided.

[netlify]

✅ Deploy Preview for actualbudget ready!

Name	Link
🔨 Latest commit	58b57ae
🔍 Latest deploy log	https://app.netlify.com/sites/actualbudget/deploys/66957f0574f6cd0008c7f9ac
😎 Deploy Preview	https://deploy-preview-2915.demo.actualbudget.org
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[github-actions]

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
9	4.95 MB → 4.95 MB (+692 B)	+0.01%

Changeset

File	Δ	Size
src/components/filters/OpButton.tsx	📈 +107 B (+20.86%)	513 B → 620 B
src/components/filters/FiltersButton.tsx	📈 +21 B (+5.90%)	356 B → 377 B
src/components/filters/CompactFiltersButton.tsx	📈 +14 B (+5.69%)	246 B → 260 B
src/components/filters/FilterExpression.tsx	📈 +150 B (+4.53%)	3.23 kB → 3.38 kB
src/components/filters/SavedFilterMenuButton.tsx	📈 +48 B (+0.97%)	4.82 kB → 4.87 kB
src/style/themes/development.ts	📈 +58 B (+0.80%)	7.09 kB → 7.14 kB
src/style/themes/light.ts	📈 +58 B (+0.78%)	7.22 kB → 7.28 kB
src/style/themes/midnight.ts	📈 +55 B (+0.78%)	6.9 kB → 6.95 kB
src/style/themes/dark.ts	📈 +57 B (+0.78%)	7.15 kB → 7.2 kB
src/components/autocomplete/PayeeAutocomplete.tsx	📈 +88 B (+0.70%)	12.25 kB → 12.34 kB
src/components/autocomplete/Autocomplete.tsx	📈 +51 B (+0.31%)	16.27 kB → 16.32 kB
src/components/filters/FiltersMenu.jsx	📈 +5 B (+0.04%)	12.17 kB → 12.18 kB
src/components/filters/NameFilter.tsx	📉 -20 B (-0.98%)	1.99 kB → 1.97 kB

View detailed bundle breakdown

Added

No assets were added

Removed

No assets were removed

Bigger

Asset	File Size	% Changed
static/js/index.js	3.21 MB → 3.21 MB (+367 B)	+0.01%
static/js/AppliedFilters.js	27.5 kB → 27.79 kB (+297 B)	+1.05%
static/js/wide.js	272.81 kB → 272.84 kB (+28 B)	+0.01%

Smaller

No assets were smaller

Unchanged

Asset	File Size	% Changed
static/js/indexeddb-main-thread-worker-e59fee74.js	13.5 kB	0%
static/js/resize-observer.js	18.37 kB	0%
static/js/BackgroundImage.js	122.29 kB	0%
static/js/narrow.js	76.15 kB	0%
static/js/usePreviewTransactions.js	790 B	0%
static/js/ReportRouter.js	1.23 MB	0%

[github-actions]

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	1.13 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	1.13 MB	0%

[joel-jeremy]

These are intentional. We use theme.pillBackgroundSelected throughout the app as background colors for pills so doing the same here.

[MatissJanis]

Happy to review this, but it looks like e2e tests are still failing.

[joel-jeremy]

@MatissJanis I'm encountering a weird issue where in the VRT tests, when clicking the Add button on the new transaction, it won't add the transaction. But when I open in a browser and do the same it does add the transaction. Any ideas?

[MatissJanis]

I think the problem is with creating transfers. When I click "create transfer" (inside account selection dropdown) - the popover just closes.

[joel-jeremy]

@MatissJanis The problem is the Notes filter. In playwright, when the Apply button is clicked it's not reflecting the "Test Acc Transfer" that was typed in the input field - it just filters "(nothing)". What's weird is it works when I manually test it.

Filter Notes:
(One thing I notice here is that the input is not focused)

After Apply:

[MatissJanis]

So there might be multiple problems with then PR then. This is the one I'm seeing:

Screen.Recording.2024-07-09.at.08.58.30.mov

[joel-jeremy]

Looks like there is something with the interaction between the autocomplete Popover and the "Make Transfer"/"Manage Payees" Button inside the Popover. It could be treating the the click as a "click outside" - not exacrly sure what is happening. Any ideas @MatissJanis? I'll move to migrate other parts of the code first and do the autocomplete and filters migration last.

[MatissJanis]

Ok, so looked into this more. What happens is:

1. the autocomplete is opened when the input field is focused
2. when a button inside it (i.e. "make transfer") is clicked - the input field loses focus
3. losing focus triggers the "close" event
4. the onPress is never triggered for the button because at this point the component is no longer rendered

AFAIK there is no way to control the focus logic for the react-aria button component. So my only other option is to use a link here (<a>) that is styled to look and behave like a button. That might solve the problem.

[github-actions]

This PR is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.