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.

Sign up for GitHub

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

Jump to bottom

feature: close select limit modal when the outside is clicked #689

Closed
2 tasks done
takanome-dev opened this issue Dec 19, 2022 · 5 comments · Fixed by #705
Closed
2 tasks done

feature: close select limit modal when the outside is clicked #689

takanome-dev opened this issue Dec 19, 2022 · 5 comments · Fixed by #705
Assignees
@takanome-dev
Labels
💡 feature low-priority 👀 needs triage released on @beta released
Milestone
Papercuts

Comments

@takanome-dev
Copy link
Contributor

Type of feature

🍕 Feature

Current behavior

Currently, when the button Showing: 10 per page is clicked, it shows different options to choose.
When clicking outside of that select options (or modal), it doesn't close it unless an option is selected or the button is clicked again.

select

Suggested solution

Adding an event listener to check if the menu is open and the clicked target is not within the menu.
Here is an example of integration: https://github.com/open-sauced/insights/blob/c7430d7265b5654e8ef65a83b1877f8a16bb7ac7/components/molecules/SuperlativeSelector/superlative-selector.tsx#L26-L47

Additional context

No response

Code of Conduct

  • I agree to follow this project's Code of Conduct

Contributing Docs

  • I agree to follow this project's Contribution Docs
@bdougie
Copy link
Member

bdougie commented Dec 20, 2022

The current implement is not accessible, and this solution prescribed would work, but seems like a band-aid. I'd suggest introducing an accessible component from Radix-UI

https://www.radix-ui.com/docs/primitives/components/dropdown-menu

@bdougie bdougie added this to the Papercuts milestone Dec 20, 2022
@takanome-dev
Copy link
Contributor Author

@sungoldtech do you think the @supabase/ui Select is needed or it can be removed?
The custom-select atom should probably be updated by using radix/dropdown

@OgDev-01
Copy link
Contributor

It should be replaced with radix component on this issue

@takanome-dev takanome-dev self-assigned this Dec 21, 2022
@takanome-dev takanome-dev mentioned this issue Dec 21, 2022
Merged
19 tasks
0-vortex pushed a commit that referenced this issue Jan 3, 2023
@takanome-dev
feat: handle close modal when click outside and improve select usage (#…
105a47b 
…705)

closes #689
github-actions bot pushed a commit that referenced this issue Jan 3, 2023
@takanome-dev @open-sauced
chore(minor): release 1.23.0-beta.8 on beta channel [skip ci]
3bbfd69 
## [1.23.0-beta.8](v1.23.0-beta.7...v1.23.0-beta.8) (2023-01-03)

### 🍕 Features

* handle close modal when click outside and improve select usage ([#705](#705)) ([105a47b](105a47b)), closes [#689](#689)
@github-actions
Copy link
Contributor

github-actions bot commented Jan 3, 2023

🎉 This issue has been resolved in version 1.23.0-beta.8 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

github-actions bot pushed a commit that referenced this issue Jan 5, 2023
@0-vortex @open-sauced
chore(minor): release 1.23.0 [skip ci]
359c26c 
## [1.23.0](v1.22.2...v1.23.0) (2023-01-05)

### 🧑‍💻 Code Refactoring

* update pr velocity indicator ([#707](#707)) ([7e96735](7e96735)), closes [#684](#684)

### 🐛 Bug Fixes

* add missing title props ([cdcc28d](cdcc28d))
* correct some tooling and dependency issues ([#749](#749)) ([cb4ec9f](cb4ec9f))
* only pull insights for stacked avatar on insight pages ([#761](#761)) ([80ae119](80ae119))
* overflow x bug on dashboard ([#709](#709)) ([b022dbc](b022dbc)), closes [#677](#677)
* user profile auth avatar processing errors ([#755](#755)) ([3ba87a6](3ba87a6)), closes [#733](#733)

### 🍕 Features

* add Edit Page button to insight pages ([#738](#738)) ([bde1eb8](bde1eb8)), closes [#685](#685)
* add favorite repos on the design system ([#744](#744)) ([c8660b5](c8660b5)), closes [#717](#717)
* add hover card and expand on contributor stack ([#742](#742)) ([9f45b3d](9f45b3d))
* adjust search font-size ([c451450](c451450))
* change name to enhace from logarithmic ([#743](#743)) ([4384324](4384324))
* enable repository selection & add to new insights page ([#693](#693)) ([ba6405d](ba6405d)), closes [#593](#593) [#592](#592)
* Filter dashboard scatter plot by PR states ([#736](#736)) ([f04093a](f04093a))
* handle close modal when click outside and improve select usage ([#705](#705)) ([105a47b](105a47b)), closes [#689](#689)
* update icon PR  details row ([#706](#706)) ([dac42ba](dac42ba)), closes [#696](#696)
@github-actions
Copy link
Contributor

github-actions bot commented Jan 5, 2023

🎉 This issue has been resolved in version 1.23.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

ElpisHelle added a commit to ElpisHelle/next.js-tailwindcss that referenced this issue Aug 17, 2023
@ElpisHelle
chore(minor): release 1.23.0-beta.8 on beta channel [skip ci]
f1b58c9 
## [1.23.0-beta.8](open-sauced/app@v1.23.0-beta.7...v1.23.0-beta.8) (2023-01-03)

### 🍕 Features

* handle close modal when click outside and improve select usage ([#705](open-sauced/app#705)) ([105a47b](open-sauced/app@105a47b)), closes [#689](open-sauced/app#689)
ElpisHelle added a commit to ElpisHelle/next.js-tailwindcss that referenced this issue Aug 17, 2023
@ElpisHelle
chore(minor): release 1.23.0 [skip ci]
b9e16b2 
## [1.23.0](open-sauced/app@v1.22.2...v1.23.0) (2023-01-05)

### 🧑‍💻 Code Refactoring

* update pr velocity indicator ([#707](open-sauced/app#707)) ([7e96735](open-sauced/app@7e96735)), closes [#684](open-sauced/app#684)

### 🐛 Bug Fixes

* add missing title props ([cdcc28d](open-sauced/app@cdcc28d))
* correct some tooling and dependency issues ([#749](open-sauced/app#749)) ([cb4ec9f](open-sauced/app@cb4ec9f))
* only pull insights for stacked avatar on insight pages ([#761](open-sauced/app#761)) ([80ae119](open-sauced/app@80ae119))
* overflow x bug on dashboard ([#709](open-sauced/app#709)) ([b022dbc](open-sauced/app@b022dbc)), closes [#677](open-sauced/app#677)
* user profile auth avatar processing errors ([#755](open-sauced/app#755)) ([3ba87a6](open-sauced/app@3ba87a6)), closes [#733](open-sauced/app#733)

### 🍕 Features

* add Edit Page button to insight pages ([#738](open-sauced/app#738)) ([bde1eb8](open-sauced/app@bde1eb8)), closes [#685](open-sauced/app#685)
* add favorite repos on the design system ([#744](open-sauced/app#744)) ([c8660b5](open-sauced/app@c8660b5)), closes [#717](open-sauced/app#717)
* add hover card and expand on contributor stack ([#742](open-sauced/app#742)) ([9f45b3d](open-sauced/app@9f45b3d))
* adjust search font-size ([c451450](open-sauced/app@c451450))
* change name to enhace from logarithmic ([#743](open-sauced/app#743)) ([4384324](open-sauced/app@4384324))
* enable repository selection & add to new insights page ([#693](open-sauced/app#693)) ([ba6405d](open-sauced/app@ba6405d)), closes [#593](open-sauced/app#593) [#592](open-sauced/app#592)
* Filter dashboard scatter plot by PR states ([#736](open-sauced/app#736)) ([f04093a](open-sauced/app@f04093a))
* handle close modal when click outside and improve select usage ([#705](open-sauced/app#705)) ([105a47b](open-sauced/app@105a47b)), closes [#689](open-sauced/app#689)
* update icon PR  details row ([#706](open-sauced/app#706)) ([dac42ba](open-sauced/app@dac42ba)), closes [#696](open-sauced/app#696)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@takanome-dev takanome-dev

Labels
💡 feature low-priority 👀 needs triage released on @beta released
Projects
No open projects
OpenSauced Operational Roadmap
Status: Done
Milestone
Papercuts
Development

Successfully merging a pull request may close this issue.

feat: handle close modal when click outside and fix accessibility issues takanome-dev/insights
3 participants
@bdougie @OgDev-01 @takanome-dev