search

RocketCommunicationsInc / astro

Astro UXDS is a collection of guidelines, patterns and components for designing space-based user interface applications.
https://astrouxds.com
Other
113 stars 25 forks source link

setFocus() method doesn't work on rux-select, rux-input #1204

Closed nortonprojects closed 1 year ago

nortonprojects commented 1 year ago

Describe the bug The Astro docs (and code) have a setFocus() method for several components, including rux-select and rux-input. When calling that method using both Angular and vanilla nothing happens.

To Reproduce Steps to reproduce the behavior:

  1. Go to https://www.astrouxds.com/components/select/
  2. Inspect the rux-select element
  3. Call $0.focus() in the console
  4. Observe nothing happening

Expected behavior Calling setFocus() ought to visibly focus the element, just like clicking/tabbing

Ideally, these components would use the delegateFocus API instead, to allow the use of the normal focus() method.

kiley-mitti commented 1 year ago

Hi Jacob! I learned something new today. You can't use .focus() directly from dev tools. This appears to be because the page is not allowed to steal focus away from Dev Tools. .setFocus() calls .focus() so it will similarly not work from the console.

I believe that .setFocus() is working, however. If you'd like to check it out via the console try: setTimeout(() => temp1.setFocus(), 3000); during the 3 second delay, click back into the page. Since the page has focus and not the console it should focus up properly!

Thank you for the suggestion on delegateFocus! We're going to look into it and see if we can use that instead. It would be nice to be able to use the native .focus() function instead of recreating the wheel. :)

Since we spoke, and you were able to get it working in Angular, I'm going to close this and move the delegateFocus part of the conversation to discussions/feature requests. However, if you DO have another issue with it let me know!