github-starred/actual
2
0
Fork 0
mirror of https://github.com/actualbudget/actual.git synced 2026-03-10 20:23:07 -05:00
Code Issues 250 Packages Projects Releases 53 Wiki Activity

[Bug]: Can't click off to close filter menu with select open #1229

New Issue
Open
opened 2026-02-28 19:36:45 -06:00 by GiteaMirror · 5 comments
GiteaMirror commented 2026-02-28 19:36:45 -06:00
Owner
Copy Link

Originally created by @matt-fidd on GitHub (Jul 13, 2024).

Verified issue does not already exist?

  • I have searched and found no existing issue
  • I will be providing steps how to reproduce the bug (in most cases this will also mean uploading a demo budget file)

What happened?

Video below for reproduction. If you open a filter modal (popover?) with a select box open (eg category one of), you can no longer click off to close the whole thing. You must first click off the select, then you can click off the filter.

https://github.com/user-attachments/assets/4d07c034-3219-4858-b41a-0d34ec7e672c

Where are you hosting Actual?

Locally via Yarn

What browsers are you seeing the problem on?

Chrome

Operating System

Windows 11

Originally created by @matt-fidd on GitHub (Jul 13, 2024). ### Verified issue does not already exist? - [X] I have searched and found no existing issue - [X] I will be providing steps how to reproduce the bug (in most cases this will also mean uploading a demo budget file) ### What happened? Video below for reproduction. If you open a filter modal (popover?) with a select box open (eg category one of), you can no longer click off to close the whole thing. You must first click off the select, then you can click off the filter. https://github.com/user-attachments/assets/4d07c034-3219-4858-b41a-0d34ec7e672c ### Where are you hosting Actual? Locally via Yarn ### What browsers are you seeing the problem on? Chrome ### Operating System Windows 11
GiteaMirror added the good first issuebughelp wanted labels 2026-02-28 19:36:45 -06:00
GiteaMirror commented 2026-02-28 19:36:46 -06:00
Author
Owner
Copy Link

@psybers commented on GitHub (Jul 24, 2024):

Probably related: #3039

@psybers commented on GitHub (Jul 24, 2024): Probably related: #3039
GiteaMirror commented 2026-02-28 19:36:46 -06:00
Author
Owner
Copy Link

@lelemm commented on GitHub (Oct 24, 2024):

As far as I can tell, the problem here is this underlay invalidating the click action:

image

Looking at the components involved, was not able to find which component is creating this underlay. Tried to check Downshift source code and didn't find it.

If you hack the CSS like this it works:

image

Couldn't find any drawback of not having this underlay

@lelemm commented on GitHub (Oct 24, 2024): As far as I can tell, the problem here is this underlay invalidating the click action: ![image](https://github.com/user-attachments/assets/14d93486-31fd-4db0-a2ab-b29d95f219b0) Looking at the components involved, was not able to find which component is creating this underlay. Tried to check Downshift source code and didn't find it. If you hack the CSS like this it works: ![image](https://github.com/user-attachments/assets/3d846e61-c535-4198-a275-b5001960fe86) Couldn't find any drawback of not having this underlay
GiteaMirror commented 2026-02-28 19:36:46 -06:00
Author
Owner
Copy Link

@psybers commented on GitHub (Oct 24, 2024):

Interesting. The only things that add "underlay" are from react-aria as part of their popover.

@psybers commented on GitHub (Oct 24, 2024): Interesting. The only things that add "underlay" are from `react-aria` as part of their popover.
GiteaMirror commented 2026-02-28 19:36:47 -06:00
Author
Owner
Copy Link

@psybers commented on GitHub (Oct 24, 2024):

image
@psybers commented on GitHub (Oct 24, 2024): <img width="919" alt="image" src="https://github.com/user-attachments/assets/25ccc67a-3d3d-45d1-b949-32553ed2b79b">
GiteaMirror commented 2026-02-28 19:36:47 -06:00
Author
Owner
Copy Link

@lelemm commented on GitHub (Oct 24, 2024):

react-aria Popover.tsx:

  return (
    <Overlay isExiting={isExiting} portalContainer={UNSTABLE_portalContainer}>
      {!props.isNonModal && state.isOpen && <div data-testid="underlay" {...underlayProps} style={{position: 'fixed', inset: 0}} />}
      <div
        {...mergeProps(filterDOMProps(props as any), popoverProps)}
        {...renderProps}
        ref={ref}
        slot={props.slot || undefined}
        style={style}
        data-trigger={props.trigger}
        data-placement={placement}
        data-entering={isEntering || undefined}
        data-exiting={isExiting || undefined}>
        {!props.isNonModal && <DismissButton onDismiss={state.close} />}
        <OverlayArrowContext.Provider value={{...arrowProps, placement, ref: arrowRef}}>
          {renderProps.children}
        </OverlayArrowContext.Provider>
        <DismissButton onDismiss={state.close} />
      </div>
    </Overlay>

This is the aria source code of the underlay for the popover.

Tried to put "isNonModal=true" to remove the underlay, it removes as expected BUT it introduces another problem. If only works when you click at some places:

https://github.com/user-attachments/assets/0dec23a2-a3cc-4ea0-83c9-7c750ee3199f

Reading more of the react aria code, I found this:
source: useOverlay.ts#L147:

  let onPointerDownUnderlay = e => {
    // fixes a firefox issue that starts text selection https://bugzilla.mozilla.org/show_bug.cgi?id=1675846
    if (e.target === e.currentTarget) {
      e.preventDefault();
    }
  };

This is what makes the onOpenChange from the Popover never get called when underlay is present.

The only way I was able to consistently close the popover is to adding

        shouldCloseOnInteractOutside={element => {
          // Datepicker selections for some reason register 2x clicks
          // We want to keep the popover open after selecting a date.
          // So we ignore the "close" event on selection + the subsequent event.
          if (element.dataset.pikaYear) {
            isDatepickerClick = true;
            return false;
          }
          if (isDatepickerClick) {
            isDatepickerClick = false;
            return false;
          }

+         dispatch({ type: 'close' });
          return true;
        }}

here FiltersMenu.jsx
This looks like a hack tbh

@lelemm commented on GitHub (Oct 24, 2024): [react-aria Popover.tsx](https://github.com/adobe/react-spectrum/blob/37fbf024aa8483106b97b3f8a857bc74bfc58664/packages/react-aria-components/src/Popover.tsx#L167-L186): ```ts return ( <Overlay isExiting={isExiting} portalContainer={UNSTABLE_portalContainer}> {!props.isNonModal && state.isOpen && <div data-testid="underlay" {...underlayProps} style={{position: 'fixed', inset: 0}} />} <div {...mergeProps(filterDOMProps(props as any), popoverProps)} {...renderProps} ref={ref} slot={props.slot || undefined} style={style} data-trigger={props.trigger} data-placement={placement} data-entering={isEntering || undefined} data-exiting={isExiting || undefined}> {!props.isNonModal && <DismissButton onDismiss={state.close} />} <OverlayArrowContext.Provider value={{...arrowProps, placement, ref: arrowRef}}> {renderProps.children} </OverlayArrowContext.Provider> <DismissButton onDismiss={state.close} /> </div> </Overlay> ``` This is the aria source code of the underlay for the popover. Tried to put "isNonModal=true" to remove the underlay, it removes as expected BUT it introduces another problem. If only works when you click at some places: https://github.com/user-attachments/assets/0dec23a2-a3cc-4ea0-83c9-7c750ee3199f Reading more of the react aria code, I found this: [source: useOverlay.ts#L147](https://github.com/adobe/react-spectrum/blob/37fbf024aa8483106b97b3f8a857bc74bfc58664/packages/%40react-aria/overlays/src/useOverlay.ts#L147): ```js let onPointerDownUnderlay = e => { // fixes a firefox issue that starts text selection https://bugzilla.mozilla.org/show_bug.cgi?id=1675846 if (e.target === e.currentTarget) { e.preventDefault(); } }; ``` This is what makes the onOpenChange from the Popover never get called when underlay is present. The only way I was able to consistently close the popover is to adding ```diff shouldCloseOnInteractOutside={element => { // Datepicker selections for some reason register 2x clicks // We want to keep the popover open after selecting a date. // So we ignore the "close" event on selection + the subsequent event. if (element.dataset.pikaYear) { isDatepickerClick = true; return false; } if (isDatepickerClick) { isDatepickerClick = false; return false; } + dispatch({ type: 'close' }); return true; }} ``` here [FiltersMenu.jsx](https://github.com/actualbudget/actual/blob/6af0dbab56a99acc5dcf78e39fe54bb1c5b4a1ce/packages/desktop-client/src/components/filters/FiltersMenu.jsx#L386C1-L399C23) This looks like a hack tbh
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
AI generated
API
bank sync
budgeting
bug
can’t replicate
dependencies
docker
documentation
electron
experimental feature
feature
feedback
goal templates
good first issue
help wanted
importers
maintenance
needs info
needs testing
needs triage
needs votes
openid
payees
pull-request
Mirrored from GitHub Pull Request
 regression
reports
responsive
rules
schedules
server
✨ merged
split transactions
tech debt
theme
transaction import
transaction reconciliation
transactions
translations
upstream
user interface
✅ approved
wontfix
No Label bug good first issue help wanted
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
GiteaMirror ninjasurge
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/actual#1229
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?