[Bug]: CustomSelect does not have a scrollbar #482

Closed
opened 2026-02-28 19:05:46 -06:00 by GiteaMirror · 2 comments
Owner

Originally created by @MatissJanis on GitHub (Jul 5, 2023).

Verified issue does not already exist?

  • I have searched and found no existing issue

What happened?

The CustomSelect component does not have a scrollbar. So sometimes you end up in a situation such as this..

Screenshot 2023-07-05 at 08 36 52

To consider: perhaps the existing CustomSelect component just doesn't cut it? Perhaps we should move to react-aria (while still keeping the same look & feel)?

What error did you receive?

No response

Where are you hosting Actual?

None

What browsers are you seeing the problem on?

No response

Operating System

None

Originally created by @MatissJanis on GitHub (Jul 5, 2023). ### Verified issue does not already exist? - [X] I have searched and found no existing issue ### What happened? The `CustomSelect` component does not have a scrollbar. So sometimes you end up in a situation such as this.. <img width="183" alt="Screenshot 2023-07-05 at 08 36 52" src="https://github.com/actualbudget/actual/assets/886567/56eb6e8e-6315-4a10-8eba-78138a48793b"> To consider: perhaps the existing `CustomSelect` component just doesn't cut it? Perhaps we should move to react-aria (while still keeping the same look & feel)? ### What error did you receive? _No response_ ### Where are you hosting Actual? None ### What browsers are you seeing the problem on? _No response_ ### Operating System None
GiteaMirror added the good first issuebug labels 2026-02-28 19:05:46 -06:00
Author
Owner

@aleetsaiya commented on GitHub (Jul 5, 2023):

Hi, I'm currently try to refactor some usages of Select component to CustomSelect component.

I've created a PR to change some part of the code inside CustomSelect component. I added style={{ maxHeight: 250, overflowY: 'scroll' }} to make it scrollable. But I don't really sure whether it's a good approach.

Here's the reference for my changed in CustomSelect component:
https://github.com/actualbudget/actual/pull/1277/files#diff-07149e52bf936b1efc7e9568048f8891bb85e018083816f3897625995e34badbL20-R40

It'll be like this:
截圖 2023-07-05 下午6 33 54

@aleetsaiya commented on GitHub (Jul 5, 2023): Hi, I'm currently try to refactor some usages of `Select` component to `CustomSelect` component. I've created a PR to change some part of the code inside `CustomSelect` component. I added `style={{ maxHeight: 250, overflowY: 'scroll' }}` to make it scrollable. But I don't really sure whether it's a good approach. Here's the reference for my changed in `CustomSelect` component: https://github.com/actualbudget/actual/pull/1277/files#diff-07149e52bf936b1efc7e9568048f8891bb85e018083816f3897625995e34badbL20-R40 It'll be like this: <img width="694" alt="截圖 2023-07-05 下午6 33 54" src="https://github.com/actualbudget/actual/assets/67775387/c63fa07f-5069-4a80-ab02-8749e21b5c72">
Author
Owner

@MatissJanis commented on GitHub (Jul 5, 2023):

That's great @aleetsaiya !

I've added your fix in this PR just so we could get it out a bit quicker: https://github.com/actualbudget/actual/pull/1294

Hope you don't mind.

@MatissJanis commented on GitHub (Jul 5, 2023): That's great @aleetsaiya ! I've added your fix in this PR just so we could get it out a bit quicker: https://github.com/actualbudget/actual/pull/1294 Hope you don't mind.
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/actual#482