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

feat(NcModal): Allow to configure if the modal is closed when clicked outside #4454

Merged
merged 1 commit into from
Aug 24, 2023

Conversation

susnux
Copy link
Contributor

@susnux susnux commented Aug 23, 2023

☑️ Resolves

Currently the modal is closed if canClose is true and the user clicked outside the modal on the backdrop. This can now be configured with the closeOnClickOutside property (defaults to true for backwards compatibility).

This is especially helpful for implementing the dialogs.

🏁 Checklist

  • ⛑️ Tests are included or are not applicable
  • 📘 Component documentation has been extended, updated or is not applicable

… outside

Currently the modal is closed if `canClose` is `true` and the user clicked outside the modal on the backdrop.
This can now be configured with the `closeOnClickOutside` property (defaults to `true` for backwards compatibility).

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
@susnux susnux added enhancement New feature or request 3. to review Waiting for reviews feature: modal Related to the modal component labels Aug 23, 2023
@susnux susnux added this to the 8.0.0 milestone Aug 23, 2023
Copy link
Contributor

@marcoambrosini marcoambrosini left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great addition :)

Code looks good but I'm testing this in the docs and adding close-on-click-outside="false" doesn't work. Am I missing something?

@susnux
Copy link
Contributor Author

susnux commented Aug 24, 2023

Great addition :)

Code looks good but I'm testing this in the docs and adding close-on-click-outside="false" doesn't work. Am I missing something?

No :close-on-click-outside="false" should be enough:
See here, clicking close always work, clicking outside only works in the first example.

voko.mp4

@skjnldsv skjnldsv merged commit 73f18d1 into master Aug 24, 2023
15 checks passed
@skjnldsv skjnldsv deleted the feat/nc-modal-make-close-on-click-configurable branch August 24, 2023 05:57
Comment on lines +432 to +439
/**
* Close the modal if the user clicked outside of the modal
* Only relevant if `canClose` is set to true.
*/
closeOnClickOutside: {
type: Boolean,
default: true,
},
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In a standard form of passing props Vue enforces HTML standard aka:

<input /> <!-- enabled-->
<input disabled /> <!-- disabled -->

But boolean props with default true requires to always use longhand form over HTML Standard:

<NcModal /> <!-- closes on click -->
<NcModal close-on-click-outside /> <!-- also closes on click, passing bool prop does nothing -->
<NcModal :close-on-click-outside="false" /> <!-- changes behavior, doesn't close on click -->
<NcModal close-on-click-outside="false" /> <!-- casts string "false" to true and closes on click -->

because of that it is usually recommended to make bool props with false default value:

<!-- With default false boolean prop -->
<NcModal /> <!-- closes on click -->
<NcModal ignore-click-outside /> <!-- changes behavior, doesn't close on click -->

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you :)
I know but did not wanted to make this a breaking change by changing the default behavior and a negated property seems to be confusing.
Maybe we can risk another breaking change?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
3. to review Waiting for reviews enhancement New feature or request feature: modal Related to the modal component
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants