Improve behavior of password input field #16011
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| if (defaultFocus) { | ||
| focusOnInputElement(); | ||
| } | ||
| }, [defaultFocus, focusOnInputElement]); |
There was a problem hiding this comment.
I feel like defaultFocus could just be autofocus={defaultFocus} on the InputComponent below.
It's only set in one place and I don't believe it changes.
krishnaglick
approved these changes
Aug 29, 2022
* Show / hide button now focuses back on the text at the previous cursor location * On comonent blur, it hides the information again
edmundito
force-pushed
the
edmundito/password-input-ux
branch
from
d21c4a7 to
d0daa29
Compare
letiescanciano
added a commit
that referenced
this pull request
Sep 5, 2022
* master: (47 commits) Add email to identify users analytics call (#16327) 🎉 Source Amazon Ads: improve `config.start_date` validation (#16191) Add comments about intermediate state emission (#16262) MySQL Source : Standardize spec.json for DB connectors that support log-based CDC replication (#16216) MSSQL Source : Standardize spec.json for DB connectors that support log-based CDC replication (#16215) Hide a bunch more destination with potential unsecure API access (#16320) Skip unit tests when run-tests is false (#16267) Hide Destination connections from UI (#16310) Add scheduled task to clean up old files from workspace (#16247) Source Google Analytics v4: Re-name google analytics connector (#16306) 🐛 Source Facebook Marketing: remove "end_date" from config if empty value (re-implement #16096) (#16222) Fix github action syntax (#16277) Re-name google analytics cionnectors (#16287) Bump Airbyte version from 0.40.3 to 0.40.4 (#16275) Hide ES and Redis destination connectors from Cloud (#16276) 15700 add tests for PokeAPI (#15701) Add ProtocolVersion to StandardDefs (#16237) 🪟 🔧 🧹 Migrate attempt `bytesSynced` to `totalStats.bytesEmitted` and cleanup `AttemptDetails` component (#16126) Improve behavior of password input field (#16011) Improve airbyte-metrics support in the Helm chart (#16166) ...
robbinhan
pushed a commit
to robbinhan/airbyte
that referenced
this pull request
Sep 29, 2022
* Improve behavior of password input field * Show / hide button now focuses back on the text at the previous cursor location * On comonent blur, it hides the information again * Fix logic on input blur * Add hide password on blur test to input * Clear the input selection start on blur * Remove defaultFocus and replace with autoFocus
jhammarstedt
pushed a commit
to jhammarstedt/airbyte
that referenced
this pull request
Oct 31, 2022
* Improve behavior of password input field * Show / hide button now focuses back on the text at the previous cursor location * On comonent blur, it hides the information again * Fix logic on input blur * Add hide password on blur test to input * Clear the input selection start on blur * Remove defaultFocus and replace with autoFocus
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What
Closes #15922
This makes a number of improvements to how the input password fields behave including:
Screen.Recording.2022-08-25.at.16.37.06.mov
How
Moves the focus management to the container div of the input. In this case, it can see both the input field as well as the button and is able to decide when the element is focused or not.
Did some research on what was the best way to set the cursor and the solution that worked was to set the selection range to the cursor's last spot through
selectionStart.To manage the blur, the container element needs to ensure that neither the button is focused or the input is focused in order to correctly hide the password at the right time. Therefore, a setTimeout is needed to wait for event such as when switching focus from the button back to the input (because the sequence of events is
button blur -> input focus)Tests