Skip to content

Commit

Permalink
Added passthrough of allowOutsideClick to focus-trap
Browse files Browse the repository at this point in the history
refs mainmatter#435
refs mainmatter#295

https://github.com/focus-trap/focus-trap is used internally for keeping focus inside a modal and for clicks outside to close the modal. It's `clickOutsideDecactivates` config is exposed allowing for  clicks on wormholed elements such as dropdowns inside a modal to not close the modal unexpectedly, however without the companion `allowOutsideClick` config those clicks are prevented from performing any interaction.

- added `allowOutsideClick` to the options passed through from the `modals` service to the `focus-trap` initialisation
  • Loading branch information
kevinansfield committed Sep 13, 2021
1 parent 48a38d7 commit 338f197
Show file tree
Hide file tree
Showing 3 changed files with 6 additions and 1 deletion.
3 changes: 3 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,2 +1,5 @@
Forked from https://github.com/simplabs/ember-promise-modals with specific changes for https://github.com/TryGhost/Admin.
Not recommended for general use, this package will be removed if upstream becomes compatible with our requirements.

Custom changes:
- added `allowOutsideClick` passthrough from the `modals` service to the `focus-trap` initialisation so `clickOutsideDeactivates` and `allowOutsideClick` and be used in tandem to allow wormholed content such as dropdowns to work inside of a modal
3 changes: 2 additions & 1 deletion addon/components/modal.js
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,10 @@ export default Component.extend({
didInsertElement() {
this._super(...arguments);

let { clickOutsideDeactivates } = this.modals;
let { allowOutsideClick, clickOutsideDeactivates } = this.modals;
let element = document.getElementById(this.modalElementId);
let options = {
allowOutsideClick,
clickOutsideDeactivates,
fallbackFocus: `#${this.modalElementId}`,
onDeactivate: () => {
Expand Down
1 change: 1 addition & 0 deletions addon/services/modals.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ export default Service.extend({
}),
top: alias('_stack.lastObject'),

allowOutsideClick: undefined,
clickOutsideDeactivates: true,

init() {
Expand Down

0 comments on commit 338f197

Please sign in to comment.