-
Notifications
You must be signed in to change notification settings - Fork 15
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
IBX-3922: Fix dropdown inside modal #584
Conversation
tischsoic
commented
Sep 28, 2022
Question | Answer |
---|---|
Tickets | https://issues.ibexa.co/browse/IBX-3922 |
Bug fix? | yes |
New feature? | no |
BC breaks? | no |
Tests pass? | yes |
Doc needed? | no |
License | GPL-2.0 |
popupInput.addEventListener( | ||
'focusin', | ||
() => { | ||
const modalInstance = bootstrap.Modal.getInstance(modal); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I get an instance every time just in case it changes etc. I also assume that this event may be in some very rare cases called before any instance was created and I don't want to create an instance inside the dropdown class.
Maybe it is too cautious.
const modalInstance = bootstrap.Modal.getInstance(modal); | ||
|
||
if (modalInstance) { | ||
modalInstance._focustrap.deactivate(); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Bootstrap modal uses FocusTrap which steals focus if it is outside the modal
https://github.com/twbs/bootstrap/blob/597c4023141dc48868889b85676b2d7269411d23/js/src/modal.js#L163
this.itemsPopover = new DropdownPopover( | ||
this.selectedItemsContainer, | ||
{ | ||
html: true, | ||
placement: 'bottom', | ||
customClass: 'ibexa-dropdown-popover', | ||
content: this.itemsPopoverContent, | ||
container: modalDialog || 'body', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Having a dropdown popup inside a modal caused problems when the modal was embedded inside a tab, which has overflow: hidden
CSS style.
c5c4bf1
to
d18bb6f
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
QA Approved on Ibexa Commerce 4.2.2-dev.
FYI, https://issues.ibexa.co/browse/IBX-3891 remains to be treated separately.
Kudos, SonarCloud Quality Gate passed!
|
Merged up:
|