Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🪟 🐛 Focus Connection Name input on field selection #20162

Merged
merged 19 commits into from
Jan 3, 2023

Conversation

teallarson
Copy link
Contributor

@teallarson teallarson commented Dec 6, 2022

What

closes #19229

BEFORE:
We would render the input, but not focus it.
https://www.loom.com/share/815b76c0ef8c48e2a0887a62b087d881

AFTER:
I added autoFocus to the Input element.

The problem was that the field was never actually focused, just rendered, so the blur never got triggered.

This is technically against our a11y linting rules however I am breaking this rule intentionally. autoFocus is not recommended because it can lead to unexpected behavior for users. However, when clicking into an input (or triggering the input appearing by clicking that button), it does not seem unexpected that the input would be focused.

This resolves the original issue as seen here:
https://www.loom.com/share/029c011240dd40ee815a5ede1f1723e6

  • Decided against using a ref here to keep the fix simple, but am open to reconsidering if that seems right

@octavia-squidington-iv octavia-squidington-iv added area/platform issues related to the platform area/frontend Related to the Airbyte webapp labels Dec 6, 2022
@teallarson teallarson changed the title quick and dirty fix 🪟 🐛 Focus Connection Name input on field selection Dec 6, 2022
@teallarson teallarson marked this pull request as ready for review December 6, 2022 21:00
@teallarson teallarson requested a review from a team as a code owner December 6, 2022 21:00
@teallarson teallarson marked this pull request as draft December 17, 2022 01:51
@teallarson teallarson marked this pull request as ready for review December 20, 2022 16:39
Copy link
Contributor

@edmundito edmundito left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested locally

@teallarson teallarson enabled auto-merge (squash) January 3, 2023 17:36
@teallarson teallarson merged commit 63446e6 into master Jan 3, 2023
@teallarson teallarson deleted the teal/connection-name-field-remains-active branch January 3, 2023 18:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area/frontend Related to the Airbyte webapp area/platform issues related to the platform
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Connection name is still active after clicking outside and the name has not been changed
3 participants