fix: close dialogs when clicking outside #999

takanome-dev · 2023-03-13T23:01:25Z

What type of PR is this? (check all applicable)

Description

This pr fixes the issues with dialogs that won't close after clicking outside of the component.

If the dialog has to be controlled, two props must be passed to the radix portal so that it will close the dialog if the outside is clicked. Those props are open and onPageChange
Note that for deleting a highlight, we're using radix alert which won't close when clicking outside.
Unrelated but the dialog showing a single highlight is too small on my end.

Related Tickets & Documents

Fixes #985

Mobile & Desktop Screenshots/Recordings

https://www.loom.com/share/32833c5e8fd44d73b90cf9c607461304

Added tests?

👍 yes
🙅 no, because they aren't needed
🙋 no, because I need help

Added to documentation?

[optional] Are there any post-deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?

netlify · 2023-03-13T23:01:30Z

✅ Deploy Preview for oss-insights ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`d7297b0`
🔍 Latest deploy log	https://app.netlify.com/sites/oss-insights/deploys/641b351d3af66c0008016d12
😎 Deploy Preview	https://deploy-preview-999--oss-insights.netlify.app
📱 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 settings.

netlify · 2023-03-13T23:01:34Z

✅ Deploy Preview for design-insights ready!

Name	Link
🔨 Latest commit	`d7297b0`
🔍 Latest deploy log	https://app.netlify.com/sites/design-insights/deploys/641b351dc35b8200099eeea2
😎 Deploy Preview	https://deploy-preview-999--design-insights.netlify.app
📱 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 settings.

brandonroberts · 2023-03-14T14:08:17Z

@takanome-dev this works if I click a link on the page to open the modal, but now it doesn't open the modal when navigating directly.

Screen.Recording.2023-03-14.at.9.06.08.AM.mov

0-vortex

You need to update your branch with beta to trigger the latest release code and return or await the router redirects you implemented in the feed in order to be able to debug them correctly.

It's likely this is 95% ready, just need to get rid of that error 👍

pages/feed/index.tsx

github-actions

PR Compliance Checks Passed!

brandonroberts · 2023-03-20T14:16:59Z

@takanome-dev still seeing the same issue with the modal closing on page load

takanome-dev · 2023-03-20T14:39:33Z

@takanome-dev still seeing the same issue with the modal closing on page load

Yeah, honestly I don't know how to fix it yet, the component re-renders multiple times that’s why it closes. I will investigate more on it, any help is appreciated.

brandonroberts · 2023-03-20T15:00:56Z

@takanome-dev still seeing the same issue with the modal closing on page load

Yeah, honestly I don't know how to fix it yet, the component re-renders multiple times that’s why it closes. I will investigate more on it, any help is appreciated.

Sure thing. I'll take a look soon

pages/feed/index.tsx

takanome-dev · 2023-03-22T06:10:53Z

@brandonroberts it should be good now

OgDev-01 · 2023-03-22T06:16:22Z

The new fix introduces another bug

Screen.Recording.2023-03-22.at.07.13.28.mov

viewing a single highlight is now blocked when a filter is selected selected.

OgDev-01 · 2023-03-22T07:34:52Z

Works as expected now 🍕

takanome-dev · 2023-03-22T08:51:26Z

Works as expected now pizza

Not yet 😅 When removing the filter, it still stays in the URL I think
😅

OgDev-01 · 2023-03-22T11:52:40Z

components/molecules/ContributorHighlight/contributor-highlight-card.tsx


-          <div>
-            <a href={prLink} className="underline text-sauced-orange cursor-pointer">


@bdougie, should this be changed to a regular p element or given the target="_blank" attribute to open the link in a new tab?

Adding target=_blank would be good

brandonroberts

Works as expected

brandonroberts · 2023-03-22T15:48:26Z

@takanome-dev after you resolve the merge conflicts, then we're ready to merge

## [1.37.0-beta.3](v1.37.0-beta.2...v1.37.0-beta.3) (2023-03-22) ### 🐛 Bug Fixes * close highlight dialog when clicking outside its container ([#999](#999)) ([1bc90bb](1bc90bb))

github-actions · 2023-03-22T17:14:29Z

🎉 This PR is included in version 1.37.0-beta.3 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

## [1.37.0](v1.36.0...v1.37.0) (2023-03-24) ### 🧑‍💻 Code Refactoring * Deleted unused hooks, removed unused exports and imports ([#1028](#1028)) ([7b2bda2](7b2bda2)) ### 🍕 Features * add teams UI for the design system ([#994](#994)) ([499d08e](499d08e)) * added active styles to navbar links ([#1016](#1016)) ([c25c0a3](c25c0a3)), closes [#697](#697) * create collaboration Ui components ([#1006](#1006)) ([19ff5a7](19ff5a7)) * replace react toast to radix ([#933](#933)) ([3e000be](3e000be)) * update top nav menu to be more responsive on mobile ([#1029](#1029)) ([90c1e4a](90c1e4a)), closes [#866](#866) ### 🐛 Bug Fixes * updated footer file to update the year dynamically ([#1040](#1040)) ([c766d95](c766d95)) * add a check for proper URL in avatarURL prop ([#1009](#1009)) ([a425279](a425279)) * center text inside upgrade access button ([#1027](#1027)) ([cf3f6cb](cf3f6cb)), closes [#1024](#1024) * close highlight dialog when clicking outside its container ([#999](#999)) ([1bc90bb](1bc90bb)) * make delete standout ([#1026](#1026)) ([9c68287](9c68287)) * make insights hub layout inconsistent on larger screens ([#1046](#1046)) ([daaf6d1](daaf6d1)) * refresh highlights list on update and delete ([#1034](#1034)) ([bf2d951](bf2d951)) * remove dialog layout overlap on single highlight view ([#1047](#1047)) ([ea836e8](ea836e8)) * update avatar style to remain aligned with the input field ([#1037](#1037)) ([2374f20](2374f20))

## [1.37.0-beta.3](open-sauced/app@v1.37.0-beta.2...v1.37.0-beta.3) (2023-03-22) ### 🐛 Bug Fixes * close highlight dialog when clicking outside its container ([#999](open-sauced/app#999)) ([1bc90bb](open-sauced/app@1bc90bb))

## [1.37.0](open-sauced/app@v1.36.0...v1.37.0) (2023-03-24) ### 🧑‍💻 Code Refactoring * Deleted unused hooks, removed unused exports and imports ([#1028](open-sauced/app#1028)) ([7b2bda2](open-sauced/app@7b2bda2)) ### 🍕 Features * add teams UI for the design system ([#994](open-sauced/app#994)) ([499d08e](open-sauced/app@499d08e)) * added active styles to navbar links ([#1016](open-sauced/app#1016)) ([c25c0a3](open-sauced/app@c25c0a3)), closes [#697](open-sauced/app#697) * create collaboration Ui components ([#1006](open-sauced/app#1006)) ([19ff5a7](open-sauced/app@19ff5a7)) * replace react toast to radix ([#933](open-sauced/app#933)) ([3e000be](open-sauced/app@3e000be)) * update top nav menu to be more responsive on mobile ([#1029](open-sauced/app#1029)) ([90c1e4a](open-sauced/app@90c1e4a)), closes [#866](open-sauced/app#866) ### 🐛 Bug Fixes * updated footer file to update the year dynamically ([#1040](open-sauced/app#1040)) ([c766d95](open-sauced/app@c766d95)) * add a check for proper URL in avatarURL prop ([#1009](open-sauced/app#1009)) ([a425279](open-sauced/app@a425279)) * center text inside upgrade access button ([#1027](open-sauced/app#1027)) ([cf3f6cb](open-sauced/app@cf3f6cb)), closes [#1024](open-sauced/app#1024) * close highlight dialog when clicking outside its container ([#999](open-sauced/app#999)) ([1bc90bb](open-sauced/app@1bc90bb)) * make delete standout ([#1026](open-sauced/app#1026)) ([9c68287](open-sauced/app@9c68287)) * make insights hub layout inconsistent on larger screens ([#1046](open-sauced/app#1046)) ([daaf6d1](open-sauced/app@daaf6d1)) * refresh highlights list on update and delete ([#1034](open-sauced/app#1034)) ([bf2d951](open-sauced/app@bf2d951)) * remove dialog layout overlap on single highlight view ([#1047](open-sauced/app#1047)) ([ea836e8](open-sauced/app@ea836e8)) * update avatar style to remain aligned with the input field ([#1037](open-sauced/app#1037)) ([2374f20](open-sauced/app@2374f20))

fix: close dialogs when clicking outside

69f5d68

takanome-dev added 3 commits March 14, 2023 08:59

fix all dialogs issues

828b2fa

fix merge conflicts

03d66f4

clear console errors

b8684df

takanome-dev marked this pull request as ready for review March 14, 2023 09:38

takanome-dev requested review from OgDev-01, brandonroberts and bdougie March 14, 2023 09:38

brandonroberts added the requested changes label Mar 14, 2023

handle showing single highlight

3faf8ec

This comment was marked as resolved.

Sign in to view

0-vortex suggested changes Mar 16, 2023

View reviewed changes

pages/feed/index.tsx Outdated Show resolved Hide resolved

takanome-dev added 3 commits March 16, 2023 06:08

debugging hydration errors

ce79dfc

fix merge conflicts

a226165

fix hydration issues

2a4e836

github-actions bot reviewed Mar 16, 2023

View reviewed changes

revert changes made in package.json

87ade23

OgDev-01 reviewed Mar 21, 2023

View reviewed changes

pages/feed/index.tsx Show resolved Hide resolved

fix unnecessary rerender

8a1a9f6

takanome-dev requested a review from 0-vortex March 22, 2023 06:10

fix weird bug :)

74d4913

hopefully it's bug free now

46a3bab

takanome-dev added needs review PRs that need review from core engineering team and removed requested changes labels Mar 22, 2023

OgDev-01 reviewed Mar 22, 2023

View reviewed changes

takanome-dev mentioned this pull request Mar 22, 2023

Bug: highlight overflows outside of modal #1031

Closed

2 tasks

brandonroberts approved these changes Mar 22, 2023

View reviewed changes

brandonroberts added the needs-approval label Mar 22, 2023

OgDev-01 approved these changes Mar 22, 2023

View reviewed changes

fix merge conflicts

10b20e4

takanome-dev added ready-to-merge and removed needs review PRs that need review from core engineering team labels Mar 22, 2023

fix merge conflicts

d7297b0

brandonroberts merged commit 1bc90bb into open-sauced:beta Mar 22, 2023

github-actions bot added the released on @beta label Mar 22, 2023

takanome-dev deleted the 985-dialog-bug branch March 22, 2023 17:21

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: close dialogs when clicking outside #999

fix: close dialogs when clicking outside #999

takanome-dev commented Mar 13, 2023 •

edited

Loading

netlify bot commented Mar 13, 2023 •

edited

Loading

netlify bot commented Mar 13, 2023 •

edited

Loading

brandonroberts commented Mar 14, 2023

This comment was marked as resolved.

0-vortex left a comment

github-actions bot left a comment •

edited

Loading

brandonroberts commented Mar 20, 2023

takanome-dev commented Mar 20, 2023

brandonroberts commented Mar 20, 2023

takanome-dev commented Mar 22, 2023

OgDev-01 commented Mar 22, 2023 •

edited

Loading

OgDev-01 commented Mar 22, 2023

takanome-dev commented Mar 22, 2023

OgDev-01 Mar 22, 2023

brandonroberts Mar 22, 2023

brandonroberts left a comment

brandonroberts commented Mar 22, 2023 •

edited

Loading

github-actions bot commented Mar 22, 2023


		<div>
		<a href={prLink} className="underline text-sauced-orange cursor-pointer">

fix: close dialogs when clicking outside #999

fix: close dialogs when clicking outside #999

Conversation

takanome-dev commented Mar 13, 2023 • edited Loading

What type of PR is this? (check all applicable)

Description

Related Tickets & Documents

Mobile & Desktop Screenshots/Recordings

Added tests?

Added to documentation?

[optional] Are there any post-deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?

netlify bot commented Mar 13, 2023 • edited Loading

✅ Deploy Preview for oss-insights ready!

netlify bot commented Mar 13, 2023 • edited Loading

✅ Deploy Preview for design-insights ready!

brandonroberts commented Mar 14, 2023

This comment was marked as resolved.

0-vortex left a comment

Choose a reason for hiding this comment

github-actions bot left a comment • edited Loading

Choose a reason for hiding this comment

brandonroberts commented Mar 20, 2023

takanome-dev commented Mar 20, 2023

brandonroberts commented Mar 20, 2023

takanome-dev commented Mar 22, 2023

OgDev-01 commented Mar 22, 2023 • edited Loading

OgDev-01 commented Mar 22, 2023

takanome-dev commented Mar 22, 2023

OgDev-01 Mar 22, 2023

Choose a reason for hiding this comment

brandonroberts Mar 22, 2023

Choose a reason for hiding this comment

brandonroberts left a comment

Choose a reason for hiding this comment

brandonroberts commented Mar 22, 2023 • edited Loading

github-actions bot commented Mar 22, 2023

takanome-dev commented Mar 13, 2023 •

edited

Loading

netlify bot commented Mar 13, 2023 •

edited

Loading

netlify bot commented Mar 13, 2023 •

edited

Loading

github-actions bot left a comment •

edited

Loading

OgDev-01 commented Mar 22, 2023 •

edited

Loading

brandonroberts commented Mar 22, 2023 •

edited

Loading