[PM-13895] Autofocus on Vault Search Browser

[Jingo88]

🎟️ Tracking

PM-13895

📔 Objective

add setTimeout focus to browser vault-v2-search

📸 Screen Recording

PM-13895-autofocus-browser.mov

⏰ Reminders before review

• Contributor guidelines followed
• All formatters and local linters executed and passed
• Written new unit and / or integration tests where applicable
• Protected functional changes with optionality (feature flags)
• Used internationalization (i18n) for all UI strings
• CI builds passed
• Communicated to DevOps any deployment requirements
• Updated any necessary documentation (Confluence, contributing docs) or informed the documentation team

🦮 Reviewer guidelines

• 👍 (:+1:) or similar for great changes
• 📝 (:memo:) or ℹ️ (:information_source:) for notes or general info
• ❓ (:question:) for questions
• 🤔 (:thinking:) or 💭 (:thought_balloon:) for more open inquiry that's not quite a confirmed issue and could potentially benefit from discussion
• 🎨 (:art:) for suggestions / improvements
• ❌ (:x:) or ⚠️ (:warning:) for more significant problems or concerns needing attention
• 🌱 (:seedling:) or ♻️ (:recycle:) for future improvements or indications of technical debt
• ⛏ (:pick:) for minor or nitpick changes

[github-actions]

Checkmarx One – Scan Summary & Details – 0c578833-dbcf-4c2d-9406-04d1874d7ce2

Fixed Issues

Severity	Issue	Source File / Package
	Client_JQuery_Deprecated_Symbols	/apps/cli/src/service-container/service-container.ts: 876

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 33.41%. Comparing base (5592d64) to head (75c7fc6).
Report is 3 commits behind head on main.

✅ All tests successful. No failed tests found.

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #11888   +/-   ##
=======================================
  Coverage   33.41%   33.41%           
=======================================
  Files        2841     2841           
  Lines       89008    89008           
  Branches    16979    16979           
=======================================
  Hits        29744    29744           
  Misses      56927    56927           
  Partials     2337     2337           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[djsmith85]

@Jingo88 I was also looking into this recently as we'll likely need the same for the new Send page.

Your solution works, but I was wondering, if this should actually work out of the box using the autofocus.directive as the underlying search.component within vault-v2-search.component.html implementing getFocusTarget.

Maybe @willmartian might know more about this or the preferred approach?

[nick-livefront]

@Jingo88 I'll be curious with what @willmartian thinks as I agree with @djsmith85 that it should work out of the box.

After a couple implementation attempts, it appears focus is getting stolen to the body. Possibly because of a navigation, just a hunch I didn't validate that.

I added a focus event listener in the focus method on the autofocus directive and it was never invoked. Which is puzzling.

  private focus() {
    if (this.focusableElement) {
      console.log(this.focusableElement.getFocusTarget()) // prints the correct input element
      this.focusableElement.getFocusTarget().addEventListener('focus', (e) => {
        console.log(e) // never gets called
      })
      this.focusableElement.getFocusTarget().focus();
      console.log(document.activeElement) // still the body element
    } else {
      this.el.nativeElement.focus();
    }
  }

[Jingo88]

I was able to apply the appAutoFocus directive. and can see my logs of the private focus SearchComponent.getFocusTarget being called on load. However the input field does not show any focus. I have the same hunch that something about the DOM load is pulling focus away.

Edit: Might have found the culprit. will update soon

[willmartian]

what @willmartian thinks

Yes, the autofocus should work here, as bit-search implements FocusableElement. Let me know if you are still having issues with it @Jingo88 and I can also take a look.

[Jingo88]

Yes, the autofocus should work here, as bit-search implements FocusableElement. Let me know if you are still having issues with it @Jingo88 and I can also take a look.

I appreciate it that but we identified the source of the issue.

Thanks to @shane-melton and @nick-livefront for all the help.