Ember-power-select: Autofocus

[jlami]

I'm having a problem with ember 3.2.2
The autofocus of the search input does not work. If I add a small timeout around the scheduleOnce in before-options component it works again. But maybe ember-wormhole or another component is messing up the timings?
I can reproduce it in a basic/clean ember new testapp with only ember-power-select 2.0.4

[urbany]

I'm getting the same problem. The default searchInput does not get focus on open.
Still trying to figure out what I updated that caused it. I'm on 2.0.4 but tried to downgrade to 2.0.3 and I still get the same problem. So maybe it's like @jlami said it's related to my upgrade to [email protected].

Will update when after I test in other ember-source releases

Edit: made some more tests, using

• [email protected] -> works
• next releases ([email protected].*) ->doesn't work

So something changed in ember that broke the autofocus :(

[urbany]

Not sure if this is a good fix or not, but it is working for me in the meanwhile, just create this JS file in your app:

// app/components/power-select/before-options.js
import { run } from '@ember/runloop';
import PowerSelectBeforeOptions from 'ember-power-select/components/power-select/before-options';


// TODO: Delete when this is fixed:
// https://github.com/cibernox/ember-power-select/issues/1130
export default PowerSelectBeforeOptions.extend({
  focusInput() {
    this.input = document.querySelector(`.ember-power-select-search-input[aria-controls="${this.listboxId}"]`);
    if (this.input) {
      run.next(this.input, 'focus');
    }
  },
});

edit: forgotten to say where the file should be located >_<

[cibernox]

That's weird, and I take that it's not easy to write a failing test for that. I'll try to verify it locally.

[cibernox]

@urbany at first glance, your fix seems reasonable.

[tzellman]

@urbany thanks for the digging!

I was able to take your idea and add it to an initializer (e.g. named fix-power-select.js):

import { run } from '@ember/runloop';
import PowerSelectBeforeOptions from 'ember-power-select/components/power-select/before-options';

// TODO: Delete when this is fixed:
// https://github.com/cibernox/ember-power-select/issues/1130
export function initialize(application) {
    PowerSelectBeforeOptions.reopen({
        focusInput() {
            this.input = document.querySelector(
                `.ember-power-select-search-input[aria-controls="${this.listboxId}"]`
            );
            if (this.input) {
                run.next(this.input, 'focus');
            }
        }
    });
}

export default {
    name: 'fix-power-select',
    initialize: initialize
};

[cibernox]

FWIW, I was able to reproduce the error and this fix seems reasonable but I'm somewhat hesitant of doing it before I get an answer on the issue I've opened: https://github.com/emberjs/ember.js/issues/16800

For now, this fix above seems good. Once I know if Ember itself is going to fix the problem I'll ping everyone on this thread to let you know is the action path.

[corrspt]

Thanks @tzellman for the initializer, I've hit this as I've updated to Ember 3.5 (from 3.1)

[cibernox]

@corrspt isn't this fixed in the last version? I thought I had fixed this already.

[barryofguilder]

@cibernox The latest version fixed it for me. @corrspt what version of ember-power-select are you using?

[corrspt]

Oops, I saw the open issue, didn’t check my version of eps. I think I’m a minor version (or two) behind. I’ll check and report back, thanks for the update guys. Sorry for not checking before hand, I usually do.

On 31 Dec 2018, at 19:59, Jason Barry [e-mail] wrote:

@cibernox The latest version fixed it for me. @corrspt what version of ember-power-select are you using?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[cibernox]

My bad too, I should have closed this.

[hashim-sohail]

@cibernox I am working on a project with the same versions, can you guide me what minimum packages to upgrade? Can't mess with the all the packages as code is quite old.