opened
boydkr
username_0
I tried to use `ember-power-select` to create a searchable dropdown in a modal, and it was impossible to focus on the search input because `lm-container#focus` steals focus from anything outside of the modal.

I implemented a hacky workaround, but it would be nice if liquid-fire had a way to deal with this.

Are there any suggestions for how to go about fixing this issue?  I would be willing to work on a PR.

###### My Workaround
`app/components/lm-container.js`
``` javascript
  focus: function() {
    if (this.get('element').contains(document.activeElement)) {
      // just let it be if we already contain the activeElement
      return;
    }

   //workaround to avoid stealing focus from wormholes
    let isWormhole = $('#ember-basic-dropdown-wormhole, #paper-wormhole')
                    .toArray()
                    .some(function(elem) {
                      return elem.contains(document.activeElement);
                    });

    if (isWormhole) { 
      return;
    }

    var target = this.$('[autofocus]');
    if (!target.length) {
      target = this.$(':tabbable');
    }

    if (!target.length) {
      target = this.$();
    }

    target[0].focus();
  },
```
Modals steal focus from wormholes
issue
created
ef4
username_1
Yeah, this is a concern. I have run into similar issues.

My long game is to build a more composable shared solution for all modals and floats -- including both liquid-modal (which may not need to even exist) and ember-power-select's dropdown.

[ember-sidebars](https://github.com/username_1/ember-sidebars) is basically already the right primitive. If we extended it to understand stacking context, something like a power-select inside a modal could be made to work correctly out of the box.
comment