How to replace deprecated `is(':focus')`?

[gnclmorais]

Hi friends! 👋

I’ve noticed today that is is deprecated, so while I had no issue replacing, for example, is(':disabled') with property('disabled') (the documentation is great), I found no example of how to replace is(':focus')… Will this be possible with another helper and, if so, could we update the documentation? I’m happy to give it a go if someone could point me to the right place… Thanks!

[ro0gr]

I believe it can be replaced by leveraging of the document.activeElement in a custom property, smth like:

// pseudo code
export function hasFocus(selector, userOptions = {}) {
  return {
    isDescriptor: true,

    get(key) {
      let options = { pageObjectKey: key, ...userOptions };

      return findOne(this, selector, options) === document.activeElement;
    }
  };
}

which could be used like the rest of the page object props:

const element = create({
  scope: '.selector',
  hasFocus: hasFocus()
});

hope it helps and would work for you!

Also I'm definitely open to accept an update for the is deprecation section.

[gnclmorais]

Hey @ro0gr, I’d be happy to contribute with an update/improvement. Would there be interested in adding this hasFocus (or something similar) to ember-cli-page-object as an official helper as well?

[ro0gr]

hey @gnclmorais! though I feel like it isn't a super frequently used feature, I'm not opposed to have this included by default.

Just a remark about possible implementation... The suggested approach with findOne( does contradict a bit with what we currently do for the rest of similar properties in v1. At the moment we try to respect the multiple option, which in its turn is deprecated now, and it's going to be removed in v2. That's why I think for the new property it'd be better to use findOne, even if we become inconsistent with the rest of props.