frontend: improve amount field of input-with-account-selector#3863
Open
thisconnect wants to merge 1 commit intoBitBoxSwiss:staging-swapfrom
Open
frontend: improve amount field of input-with-account-selector#3863thisconnect wants to merge 1 commit intoBitBoxSwiss:staging-swapfrom
thisconnect wants to merge 1 commit intoBitBoxSwiss:staging-swapfrom
Conversation
The right-hand side of the InputWithAccountSelector component shows amount field with fiat conversion. Only the amount field is an input field. To focus a user had to exactly click/tab on the correct posistion. Changed the container to be the input label. Native HTML behavior for a container label is to focus the input field when the label is clicked. Also updated focus and invalid styles and added some hack comments. The hack is more about using CSS selector that affect the child components. Better would be to have normal class and use props to not depend on HTML structure of the child component.
thisconnect
commented
Feb 11, 2026
| } | ||
|
|
||
| .accountSelectorCol > div { | ||
| .accountSelectorCol > div { /* hack, would be good if GroupedAccountSelector had a prop to accept a className for the dropdown */ |
Collaborator
Author
There was a problem hiding this comment.
I try to make a PR to master so we can use normal class without targeting the direct child div.
Collaborator
Author
There was a problem hiding this comment.
Found and fixed some small bugs and regressions opened PR here #3865
I'll open a PR later for fixing the hacky > div
thisconnect
commented
Feb 11, 2026
|
|
||
| .inputCol input, | ||
| .inputCol input:invalid, | ||
| .inputComponent > div:has(input:invalid) { /* '> div' is a bit hack, would be nice to add class directly */ |
Collaborator
Author
There was a problem hiding this comment.
I'll check if we can pass className on the input-number component, will open PR on master
Collaborator
Author
|
With this PR: before: |
thisconnect
changed the title
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
The right-hand side of the InputWithAccountSelector component shows amount field with fiat conversion. Only the amount field is an input field. To focus a user had to exactly click/tab on the correct posistion.
Changed the container to be the input label. Native HTML behavior for a container label is to focus the input field when the label is clicked.
Also updated focus and invalid styles and added some hack comments. The hack is more about using CSS selector that affect the child components. Better would be to have normal class and use props to not depend on HTML structure of the child component.