Auto-select entire input field on focus#811
Conversation
|
Size Change: +5.06 kB (1%) Total Size: 499 kB
ℹ️ View Unchanged
|
|
@barklund From testing: It currently doesn't seem to work for opacity fields which go together with |
Ah yes, that's a different component that |
Done. @miina, PTAL. |
| const handleFocusIn = useCallback(() => setIsFocused(true), []); | ||
| const handleFocusOut = useCallback(() => setIsFocused(false), []); |
There was a problem hiding this comment.
Can we rename these to handleFocus and handleBlur ? That's more standard
|
All (the pull request submitter and all commit authors) CLAs are signed, but one or more commits were authored or co-authored by someone other than the pull request submitter. We need to confirm that all authors are ok with their commits being contributed to this project. Please have them confirm that by leaving a comment that contains only Note to project maintainer: There may be cases where the author cannot leave a comment, or the comment is not properly detected as consent. In those cases, you can manually confirm consent of the commit author(s), and set the ℹ️ Googlers: Go here for more info. |
|
@googlebot I consent |
|
CLAs look good, thanks! ℹ️ Googlers: Go here for more info. |
* master: Update list of Google Fonts Bump babel-jest from 25.2.3 to 25.2.4 (#851) Resize video while resizing (#804) Bump @wordpress/components from 9.2.5 to 9.2.6 (#839) Bump eslint-plugin-testing-library from 2.2.3 to 3.0.0 (#849) Bump react-moveable from 0.18.1 to 0.19.0 (#850) Bump lint-staged from 10.0.9 to 10.0.10 Bump eslint-plugin-import from 2.20.1 to 2.20.2 (#846) Auto-select entire input field on focus (#811) Disallow masking for background. (#827) Reduce timing difference for entering edit mode. (#829) Clicking on media in the gallery should never insert as background (#841) Bump @testing-library/dom from 7.1.2 to 7.1.3 (#843) Reorderable drag and drop component (#709) Minimize layer panel height + fixes for expanding/collapsing (#704) remove lingering extra styled component import comment adding tests for which icon is present on chip bookmark some clean up bookmark chip ui component. 2 sizes controlled by constants.js. Storybook + a very basic test Template Animations: Added float-on animation (#618)
|
Added to alpha branch |
* Auto-select entire input field on focus * Rewrite to generic hook * Reuse focus-select hook for opacity input * Rename onFocusOut -> onBlur Co-authored-by: Wassim Gharbi <wassgha@gmail.com>
* master: (60 commits) return stories from async func Fix case naming. Story state location. Bump @testing-library/dom from 7.1.3 to 7.1.4 (#866) Renamed status var inside loop Use wordpress i18n for status labels Added API-endpoint for story data Bump lint-staged from 10.0.10 to 10.1.0 (#863) Revert "Aspect Ratio changed after dragging video to upload as background" add test for updateElementsByVideoId Fix typo to fix blob issue. Update list of Google Fonts Exit edit mode on link change Bump babel-jest from 25.2.3 to 25.2.4 (#851) Resize video while resizing (#804) Bump @wordpress/components from 9.2.5 to 9.2.6 (#839) Bump eslint-plugin-testing-library from 2.2.3 to 3.0.0 (#849) Bump react-moveable from 0.18.1 to 0.19.0 (#850) Bump lint-staged from 10.0.9 to 10.0.10 Bump eslint-plugin-import from 2.20.1 to 2.20.2 (#846) Auto-select entire input field on focus (#811) ...
Fixes #736.
This ensures selection of entire text field on focus. This makes it work for symbol-postfixed inputs when tabbing to them.
But more than that, it actually also selects the entire text field when mouse clicking into a text field. I think this is actually good behaviour.
If desired, we can loosen this effect to only occur on keyboard focus changes and not mouse focus changes.
Demo – first focusing by mouse, then by pressing (shift +) tab:
