-
-
Notifications
You must be signed in to change notification settings - Fork 151
fix(BModal): ensure clicking inside and releasing outside does not close modal (#2703) #2704
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(BModal): ensure clicking inside and releasing outside does not close modal (#2703) #2704
Conversation
|
WalkthroughThe event handler for detecting backdrop clicks in the modal component was changed from listening to the Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ModalContainer
User->>ModalContainer: Mousedown on backdrop
ModalContainer-->>User: Modal closes
Assessment against linked issues
Poem
Note ⚡️ AI Code Reviews for VS Code, Cursor, WindsurfCodeRabbit now has a plugin for VS Code, Cursor and Windsurf. This brings AI code reviews directly in the code editor. Each commit is reviewed immediately, finding bugs before the PR is raised. Seamless context handoff to your AI code agent ensures that you can easily incorporate review feedback. Note ⚡️ Faster reviews with cachingCodeRabbit now supports caching for code and dependencies, helping speed up reviews. This means quicker feedback, reduced wait times, and a smoother review experience overall. Cached data is encrypted and stored securely. This feature will be automatically enabled for all accounts on May 30th. To opt out, configure 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
@xvaara wasnt there a reason why onclickoutside was removed |
Yes there was, I don't really remember what it was anymore. But it seems this is fixable by changing the @click to @mousedown on the modal element. |
Whilst this does fix my initial issue, it does differ from the Bootstrap V5 modal behaviour. If a user intends to drag select some text within a modal and starts on the backdrop it will immediately close instead of only closing on mouseup. I think it would be ideal to learn why Command I used to find references of 'onClickOutside' in git history > git log -G"onClickOutside" -p | Select-String "diff"
diff --git a/packages/bootstrap-vue-next/src/components/BPopover/BPopover.vue
b/packages/bootstrap-vue-next/src/components/BPopover/BPopover.vue
diff --git a/packages/bootstrap-vue-next/src/components/BDropdown/BDropdown.vue
b/packages/bootstrap-vue-next/src/components/BDropdown/BDropdown.vue
diff --git a/packages/bootstrap-vue-next/src/components/BPopover.vue
b/packages/bootstrap-vue-next/src/components/BPopover.vue
diff --git a/packages/bootstrap-vue-next/src/components/BDropdown/BDropdown.vue
b/packages/bootstrap-vue-next/src/components/BDropdown/BDropdown.vue
diff --git a/packages/bootstrap-vue-next/src/components/BPopover.vue
b/packages/bootstrap-vue-next/src/components/BPopover.vue
diff --git a/packages/bootstrap-vue-next/src/components/BDropdown/BDropdown.vue
b/packages/bootstrap-vue-next/src/components/BDropdown/BDropdown.vue
diff --git a/packages/bootstrap-vue-next/src/components/BDropdown/BDropdown.vue
b/packages/bootstrap-vue-next/src/components/BDropdown/BDropdown.vue
diff --git a/packages/bootstrap-vue-next/src/components/BDropdown/BDropdown.vue
b/packages/bootstrap-vue-next/src/components/BDropdown/BDropdown.vue |
* upstream/main: chore: remove blur from boverlay in cases where its not allowed by br… (bootstrap-vue-next#2712) feat(BTableLite): add `table-colgroup` slot (bootstrap-vue-next#2680) perf: use getter functions over computed in some cases feat(BModal): use css var for zindex, add helper vars and ontop class (bootstrap-vue-next#2556) feat(BFormTags): added feedbackAriaLive prop (bootstrap-vue-next#2696) fix(scss) moved all scss styles out of components (bootstrap-vue-next#2671) fix(BModal): ensure clicking inside and releasing outside does not close modal (bootstrap-vue-next#2703) (bootstrap-vue-next#2704) fix(BToast): race condition if using setInterval to update countdown doc data feat(BPopover): add titleClass and bodyClass, remove unneeded customClass prop since class is inherited to the same place feat(BToast): add noProgress prop, make progress show as default if modelValue is number. fix(useToastController): if using the deprecated show method the countdown didn't start.
Describe the PR
Closes #2703
Uses the VueUse onClickOutside function similar to BDropdown and BPopover so that when a user begins clicking inside the modal and releases outside, it does not close the modal.
This behaviour matches the Bootstrap V5 modal behaviour.
Small replication
As described in the issue, the behaviour now falls in-line with Bootstrap V5.
With the following App.vue:
Behaviour before changes

Behaviour after changes

PR checklist
What kind of change does this PR introduce? (check at least one)
fix(...)
feat(...)
fix(...)
docs(...)
The PR fulfills these requirements:
CHANGELOG
is generated from these messages, and determines the next version type. Pull requests that do not follow conventional commits or do not have an override will be deniedSummary by CodeRabbit