IBX-3922: Fix dropdown inside modal #584
Conversation
tischsoic
commented
Sep 28, 2022
tischsoic
commented
| 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.
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.
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.
Having a dropdown popup inside a modal caused problems when the modal was embedded inside a tab, which has overflow: hidden CSS style.
tischsoic
force-pushed
the
IBX-3922-dropdown-in-modal-fixes
branch
from
c5c4bf1
to
d18bb6f
Compare
There was a problem hiding this comment.
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:
|
