Skip to content
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

fix(core): handle modal overlay click event correctly #8063

Conversation

pengx17
Copy link
Collaborator

@pengx17 pengx17 commented Sep 3, 2024

  1. overlay click + hide is brought back. this is because modal (ormobile menu)'s onPointerDownOutside is bound to document.body. Code in
    // prevent jump to page
    e.stopPropagation();
    e.preventDefault();
    }}
    will stop the event from bubbling to the document element.
  2. when Menu's set to modal=true, the parent is set to pointer-events: none as well. changed menu to modal false instead.

image.png

Copy link

graphite-app bot commented Sep 3, 2024

Your org has enabled the Graphite merge queue for merging into canary

Add the label “merge” to the PR and Graphite will automatically add it to the merge queue when it’s ready to merge. Or use the label “hotfix” to add to the merge queue as a hot fix.

You must have a Graphite account and log in to Graphite in order to use the merge queue. Sign up using this link.

Copy link
Collaborator Author

pengx17 commented Sep 3, 2024

This stack of pull requests is managed by Graphite. Learn more about stacking.

Join @pengx17 and the rest of your teammates on Graphite Graphite

Copy link

nx-cloud bot commented Sep 3, 2024

@pengx17 pengx17 marked this pull request as ready for review September 3, 2024 06:58
Copy link

codecov bot commented Sep 3, 2024

Codecov Report

Attention: Patch coverage is 40.00000% with 6 lines in your changes missing coverage. Please review.

Project coverage is 52.60%. Comparing base (ae3b13b) to head (d00f86c).
Report is 1 commits behind head on canary.

Files with missing lines Patch % Lines
packages/frontend/component/src/ui/modal/modal.tsx 0.00% 6 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##           canary    #8063      +/-   ##
==========================================
+ Coverage   52.57%   52.60%   +0.03%     
==========================================
  Files        1228     1228              
  Lines       48071    48080       +9     
  Branches     5858     5861       +3     
==========================================
+ Hits        25271    25293      +22     
+ Misses      22429    22416      -13     
  Partials      371      371              
Flag Coverage Δ
server-test 77.31% <ø> (+0.07%) ⬆️
unittest 25.26% <40.00%> (+<0.01%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@pengx17 pengx17 force-pushed the 09-03-fix_core_handle_modal_overlay_click_event_correctly branch from e58af08 to 797c71f Compare September 3, 2024 08:58
@github-actions github-actions bot added test Related to test cases app:core labels Sep 3, 2024
@pengx17 pengx17 force-pushed the 09-03-fix_core_handle_modal_overlay_click_event_correctly branch 2 times, most recently from 1a9c5e6 to 50f0bba Compare September 3, 2024 09:14
Copy link

graphite-app bot commented Sep 3, 2024

Merge activity

  • Sep 3, 5:27 AM EDT: pengx17 added this pull request to the Graphite merge queue.
  • Sep 3, 6:27 AM EDT: The Graphite merge queue couldn't merge this PR because it was not satisfying all requirements (Failed CI: '3, 2, 1 Launch', 'Unit Test').
  • Sep 3, 6:34 AM EDT: pengx17 added this pull request to the Graphite merge queue.
  • Sep 3, 7:08 AM EDT: The Graphite merge queue couldn't merge this PR because it was not satisfying all requirements (Failed CI: '3, 2, 1 Launch', 'Server E2E Test 3/3', 'Desktop Test (macos-14, macos, arm64, aarch64-apple-darwin, true)').
  • Sep 3, 7:20 AM EDT: Brooooooklyn added this pull request to the Graphite merge queue.
  • Sep 3, 8:12 AM EDT: Brooooooklyn merged this pull request with the Graphite merge queue.

pengx17 added a commit that referenced this pull request Sep 3, 2024
1. overlay click + hide is brought back. this is because modal (ormobile menu)'s `onPointerDownOutside` is bound to document.body. Code in https://github.com/toeverything/AFFiNE/blob/e58af08f6325c7c2c6cbd3325e954fd7d2ab6859/packages/frontend/core/src/modules/explorer/views/tree/node.tsx#L353-L356 will stop the event from bubbling to the document element.
2. when Menu's set to modal=true, the parent is set to pointer-events: none as well. changed menu to modal false instead.

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/T2klNLEk0wxLh4NRDzhk/3e50281f-839d-4463-af00-dff2fce8202b.png)
@pengx17 pengx17 force-pushed the 09-03-fix_core_handle_modal_overlay_click_event_correctly branch from 50f0bba to 86ee131 Compare September 3, 2024 10:15
pengx17 added a commit that referenced this pull request Sep 3, 2024
1. overlay click + hide is brought back. this is because modal (ormobile menu)'s `onPointerDownOutside` is bound to document.body. Code in https://github.com/toeverything/AFFiNE/blob/e58af08f6325c7c2c6cbd3325e954fd7d2ab6859/packages/frontend/core/src/modules/explorer/views/tree/node.tsx#L353-L356 will stop the event from bubbling to the document element.
2. when Menu's set to modal=true, the parent is set to pointer-events: none as well. changed menu to modal false instead.

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/T2klNLEk0wxLh4NRDzhk/3e50281f-839d-4463-af00-dff2fce8202b.png)
@pengx17 pengx17 force-pushed the 09-03-fix_core_handle_modal_overlay_click_event_correctly branch from 86ee131 to f6f27af Compare September 3, 2024 10:57
1. overlay click + hide is brought back. this is because modal (ormobile menu)'s `onPointerDownOutside` is bound to document.body. Code in https://github.com/toeverything/AFFiNE/blob/e58af08f6325c7c2c6cbd3325e954fd7d2ab6859/packages/frontend/core/src/modules/explorer/views/tree/node.tsx#L353-L356 will stop the event from bubbling to the document element.
2. when Menu's set to modal=true, the parent is set to pointer-events: none as well. changed menu to modal false instead.

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/T2klNLEk0wxLh4NRDzhk/3e50281f-839d-4463-af00-dff2fce8202b.png)
@Brooooooklyn Brooooooklyn force-pushed the 09-03-fix_core_handle_modal_overlay_click_event_correctly branch from f6f27af to d00f86c Compare September 3, 2024 12:00
@graphite-app graphite-app bot merged commit d00f86c into canary Sep 3, 2024
38 checks passed
@graphite-app graphite-app bot deleted the 09-03-fix_core_handle_modal_overlay_click_event_correctly branch September 3, 2024 12:12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
Status: No status
Development

Successfully merging this pull request may close these issues.

2 participants