-
-
Notifications
You must be signed in to change notification settings - Fork 1.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
♻️ (autocomplete) refactor PayeeAutocomplete to react-select #741
Conversation
✅ Deploy Preview for actualbudget ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
Co-authored-by: Jed Fox <git@jedfox.com>
Good spot! I really dislike these zIndex shenanigans, but.. at least now the issue is solved: 2369fdf
Yea, there is a small bottom padding. Not worth fixing IMO |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
A few more issues:
- Moving your cursor out of the menu will scroll it to the top, it would be nice to preserve scroll position.
- Tab/Shift+Tab do not properly move to the previous and next columns
- esc should close the menu while keeping focus on the text field (so that nearby rows can be reviewed while entering a value)
- The old autocomplete UI doesn’t reliably do this but it would be awesome to consistently flip the dropdown to appear above the field if there isn’t enough space below it.
- Would it be possible to reduce the top padding here so that the title nestles more snugly into the corner?
For a component as common and essential as this I think we should fix all the small issues we can. Happy to work on it myself though! |
Added a few small style tweaks. Will see if I can fix some of the functional issues too in the coming days. Signing off for today :) Feel free to also work on this branch and push your changes if you have some time. |
Solved some more problems:
|
Ok, I'm stuck on the "tab" issue and the scrolling issue ((1) and (2) in the list). A fresh perspective on the issue (another pair of eyes) would be very much appreciated. |
Tab key fixed |
Looking at the scrolling issue now |
I figured it out! The problem is that React unmounts and remounts components when their identities change, and the value of the function defining the component is part of that identity. As a result, using a function expression as a component will cause it to unmount and remount each time the component defining the function is re-rendered. I’ve extracted the component out to fix this issue. (And also created a |
Amazing! Great job @j-f1 ! |
I'm not sure if this is relevant, but a similar thing will happen if you switch between the Creatable and Select components. |
That shouldn't be a problem. We generally don't switch between the two states. The component is always either one or the other (depends on the part of the app). |
Noticed a bug in the Oh and also the top/bottom direction of the popover is now dynamic. The only remaining issue I'm spotting now is: it's not possible to set a payee filter on the transaction table. |
Fixed the filter list issue. Out for review again :) |
Fixed a minor flickering issue when scrolling: content warning: flickering imageScreen.Recording.2023-03-14.at.20.06.18.mov |
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I’m happy merging this for now so you don’t have to keep fixing merge conflicts and then we can iterate on the remaining problems before dropping the old code.
Good idea! Thanks for creating the ticket! |
Refactored PayeeAutocomplete to
react-select
. The new component is under a feature flag.I will be slowly refactoring other bits too, but it will take time as it's not an easy migration.. so I've put it under a feature flag for now. Once we're ready to release and are confident we can remove the old code.
This will also allow us to eventually remove
lively
.There might be some small functional/design differences. I tried getting it as close to the existing one as possible, but it won't be 1:1.