Clear input with extra button #357
Merged
Conversation
This file contains hidden or 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
… for small screens
ZeroGxMax
pushed a commit
to minhhpkp/graphhopper-maps
that referenced
this pull request
Nov 12, 2024
* simpler onclick behaviour for touch devices and avoid onBlur problems for small screens * back button on left side * new clear text button instead of selecting text which doesn't work in Safari * put clear button outside of input to avoid that input receives clicks from it * revert font size to master
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.
Replaces #356. Uses a different approach to fix the second part of #351. Partially related to #337 and #127.
Try here.
Selecting the text on focus does not seem to work on iphones and the UX with the clear button is better anyway. Mobile view:
Introducing this button was a bit tricky:
The "blur" problem interfered once again (we tried to fix it in no onblur for smallscreen #354). Here we used the more general approach of disabling blur when a "pointer down" event is happening which seems to work better but we have to attach the "pointer down" detection not only for the autocomplete items but also for the clear button. (This replaces the "pointer cancel"-approach introduced in Current location #127)
Furthermore the clear button is related to the autocomplete width and so we need another useRef to the entire inputContainer.