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

Add to ClayPopover the possibility to close the popover when clicking outside it #4536

Closed
claraizquierdo opened this issue Jan 4, 2022 · 3 comments · Fixed by #4542
Closed

Add to ClayPopover the possibility to close the popover when clicking outside it #4536

claraizquierdo opened this issue Jan 4, 2022 · 3 comments · Fixed by #4542
Labels
rfc Similar to the RFC that are used in React.js, Ember.js, Gatsby.js and Rust, but to mark problems tha
Milestone
LPS-144180 - Bi-w...

Comments

@claraizquierdo
Copy link

What is your proposal?

We need the ability to close a ClayPopover component when the user clicks outside it or its trigger. Maybe it can be implemented with a new property (with boolean value) so that we can decide when to use the feature and when not.

Why would adopting this proposal be beneficial?

We will avoid repeating code for closing Popovers when clicking outside them. We have a custom solution implemented here and we will also need to add it in the Content Dashboard.

What are the alternatives to this proposal?

We implemented an alternative using a custom hook (liferay-frontend/liferay-portal#1793), but implementing it in the component seems cleaner.
@claraizquierdo claraizquierdo added the rfc Similar to the RFC that are used in React.js, Ember.js, Gatsby.js and Rust, but to mark problems tha label Jan 4, 2022
julien pushed a commit to julien/clay that referenced this issue Jan 5, 2022
feat(@clayui/popover): add a closeOnClickOutside prop
bd722a9 
This will allow closing the popover when clicking outside
of it.

Fixes liferay#4536
@julien julien mentioned this issue Jan 5, 2022
Merged
This was referenced Jan 10, 2022
Closed
Closed
@drakonux
Copy link
Member

@julien, ok, we've added a new property to the component to enable closing the popover clicking outside. And about the trigger? Are we providing that way of closing the popover too?

@julien
Copy link
Contributor

julien commented Jan 11, 2022

@drakonux the trigger is used to toggle the popover's visibility which we haven't changed, so I don't understand what you are asking for here.

julien pushed a commit to julien/liferay-portal that referenced this issue Jan 12, 2022
LPS-144181 Update Clay dependencies
6b8b68f 
 ## [3.44.2](liferay/clay@v3.44.1...v3.44.2) (2022-01-12)

 ### Bug Fixes

 -   **@clayui/css:** Cadmin Nav adds `background-color` to `.active` pseudo element ([865b037](liferay/clay@865b037)), closes [liferay#4562](liferay/clay#4562)
 -   **@clayui/css:** Mixins `clay-button-variant` removes unnecessary `setter()`'s ([3709d7f](liferay/clay@3709d7f)), closes [liferay#4550](liferay/clay#4550)

 ## [3.44.1](liferay/clay@v3.44.0...v3.44.1) (2022-01-11)

 ### Bug Fixes

 -   **@clayui/core:** remove the context property from DndProvider ([4faf0ea](liferay/clay@4faf0ea))
 -   **@clayui/css:** Mixins `clay-card-variant` allow styling before and after psuedo elements ([69f1d38](liferay/clay@69f1d38)), closes [liferay#4554](liferay/clay#4554)

 # [3.44.0](liferay/clay@v3.43.1...v3.44.0) (2022-01-10)

 ### Bug Fixes

 -   **@clayui/css:** Cadmin Input Groups `input-group-sm` missing mixin declaration ([d7027be](liferay/clay@d7027be)), closes [liferay#4537](liferay/clay#4537)
 -   **@clayui/css:** Cards `form-check-card` remove duplicate hover state style ([17ea640](liferay/clay@17ea640))
 -   **@clayui/css:** Mixins Cards check if parameter is map to avoid must be a map error ([2174587](liferay/clay@2174587))
 -   **@clayui/css:** Mixins Custom Forms remove `setter()`, no longer needed ([4cb30ce](liferay/clay@4cb30ce))

 ### Features

 -   **@clayui/css:** Cadmin Nav adds `nav-divider` and `nav-divider-end` ([66ba6ce](liferay/clay@66ba6ce))
 -   **@clayui/css:** Cards `form-check-card` checkbox/radio input should be hidden unless position utilities are used ([3120797](liferay/clay@3120797)), closes [liferay#4544](liferay/clay#4544)
 -   **@clayui/css:** Cards `form-check-card` convert to Clay mixin pattern ([5b4424b](liferay/clay@5b4424b))
 -   **@clayui/css:** Mixin `clay-card-variant` make `form-check-card` and `form-check-input` customizable ([c6a3a6f](liferay/clay@c6a3a6f))
 -   **@clayui/css:** Mixins `clay-custom-control-input-variant` add option to customize card ([87682d2](liferay/clay@87682d2))
 -   **@clayui/css:** Mixins `clay-navbar-variant` adds option to customize `nav-divider` and `nav-divider-end` ([e58c23e](liferay/clay@e58c23e))
 -   **@clayui/css:** Mixins Card adds `clay-form-check-card-variant` ([a834502](liferay/clay@a834502))
 -   **@clayui/css:** Nav adds `nav-divider` and `nav-divider-end` ([600a379](liferay/clay@600a379))
 -   **@clayui/css:** SVG Icons adds date-time ([4bf8d4c](liferay/clay@4bf8d4c))
 -   **@clayui/popover:** add a closeOnClickOutside prop ([bd722a9](liferay/clay@bd722a9)), closes [liferay#4536](liferay/clay#4536)

 ## [3.43.1](liferay/clay@v3.43.0...v3.43.1) (2022-01-04)

-   **@clayui/core:** avoid async/await in TreeViewItem ([78f8585](liferay/clay@78f8585)), closes [liferay#4529](liferay/clay#4529) [liferay#4531](liferay/clay#4531)
-   **@clayui/core:** don't export TreeView as UNSAFE_TreeView ([fc54a6e](liferay/clay@fc54a6e)), closes [liferay#4528](liferay/clay#4528) [liferay#4531](liferay/clay#4531) [liferay#4532](liferay/clay#4532)
@julien julien mentioned this issue Jan 12, 2022
Closed
Closed
brianchandotcom pushed a commit to brianchandotcom/liferay-portal that referenced this issue Jan 12, 2022
@brianchandotcom
LPS-144181 Update Clay dependencies
7fd95b6 
 ## [3.44.2](liferay/clay@v3.44.1...v3.44.2) (2022-01-12)

 ### Bug Fixes

 -   **@clayui/css:** Cadmin Nav adds `background-color` to `.active` pseudo element ([865b037](liferay/clay@865b037)), closes [#4562](liferay/clay#4562)
 -   **@clayui/css:** Mixins `clay-button-variant` removes unnecessary `setter()`'s ([3709d7f](liferay/clay@3709d7f)), closes [#4550](liferay/clay#4550)

 ## [3.44.1](liferay/clay@v3.44.0...v3.44.1) (2022-01-11)

 ### Bug Fixes

 -   **@clayui/core:** remove the context property from DndProvider ([4faf0ea](liferay/clay@4faf0ea))
 -   **@clayui/css:** Mixins `clay-card-variant` allow styling before and after psuedo elements ([69f1d38](liferay/clay@69f1d38)), closes [#4554](liferay/clay#4554)

 # [3.44.0](liferay/clay@v3.43.1...v3.44.0) (2022-01-10)

 ### Bug Fixes

 -   **@clayui/css:** Cadmin Input Groups `input-group-sm` missing mixin declaration ([d7027be](liferay/clay@d7027be)), closes [#4537](liferay/clay#4537)
 -   **@clayui/css:** Cards `form-check-card` remove duplicate hover state style ([17ea640](liferay/clay@17ea640))
 -   **@clayui/css:** Mixins Cards check if parameter is map to avoid must be a map error ([2174587](liferay/clay@2174587))
 -   **@clayui/css:** Mixins Custom Forms remove `setter()`, no longer needed ([4cb30ce](liferay/clay@4cb30ce))

 ### Features

 -   **@clayui/css:** Cadmin Nav adds `nav-divider` and `nav-divider-end` ([66ba6ce](liferay/clay@66ba6ce))
 -   **@clayui/css:** Cards `form-check-card` checkbox/radio input should be hidden unless position utilities are used ([3120797](liferay/clay@3120797)), closes [#4544](liferay/clay#4544)
 -   **@clayui/css:** Cards `form-check-card` convert to Clay mixin pattern ([5b4424b](liferay/clay@5b4424b))
 -   **@clayui/css:** Mixin `clay-card-variant` make `form-check-card` and `form-check-input` customizable ([c6a3a6f](liferay/clay@c6a3a6f))
 -   **@clayui/css:** Mixins `clay-custom-control-input-variant` add option to customize card ([87682d2](liferay/clay@87682d2))
 -   **@clayui/css:** Mixins `clay-navbar-variant` adds option to customize `nav-divider` and `nav-divider-end` ([e58c23e](liferay/clay@e58c23e))
 -   **@clayui/css:** Mixins Card adds `clay-form-check-card-variant` ([a834502](liferay/clay@a834502))
 -   **@clayui/css:** Nav adds `nav-divider` and `nav-divider-end` ([600a379](liferay/clay@600a379))
 -   **@clayui/css:** SVG Icons adds date-time ([4bf8d4c](liferay/clay@4bf8d4c))
 -   **@clayui/popover:** add a closeOnClickOutside prop ([bd722a9](liferay/clay@bd722a9)), closes [#4536](liferay/clay#4536)

 ## [3.43.1](liferay/clay@v3.43.0...v3.43.1) (2022-01-04)

-   **@clayui/core:** avoid async/await in TreeViewItem ([78f8585](liferay/clay@78f8585)), closes [#4529](liferay/clay#4529) [#4531](liferay/clay#4531)
-   **@clayui/core:** don't export TreeView as UNSAFE_TreeView ([fc54a6e](liferay/clay@fc54a6e)), closes [#4528](liferay/clay#4528) [#4531](liferay/clay#4531) [#4532](liferay/clay#4532)
@github-actions
Copy link

This issue has been merged and will be released in DXP at https://issues.liferay.com/browse/LPS-144180

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
rfc Similar to the RFC that are used in React.js, Ember.js, Gatsby.js and Rust, but to mark problems tha
Projects
None yet
Milestone
LPS-144180 - Bi-weekly Clay release J...
3 participants
@julien @claraizquierdo @drakonux