SelectPanel2: Only show clear action in search with text #4146
Conversation
This comment was marked as resolved.
This comment was marked as resolved.
size-limit report 📦
|
siddharthkp
temporarily deployed
to
github-pages
GitHub Actions
Inactive
siddharthkp
temporarily deployed
to
github-pages
GitHub Actions
Inactive
| // '& input:empty + .TextInput-action': {display: 'none'}, | ||
| } | ||
| } | ||
| sx={{'&:has(input:placeholder-shown) .TextInput-action': {display: 'none'}}} |
There was a problem hiding this comment.
Note: this was fun! was able to use a new css feature and a really old css feature
siddharthkp
temporarily deployed
to
github-pages
GitHub Actions
Inactive
There was a problem hiding this comment.
Looks great!
One tiny comment: I know this is nitpicking but I just want to mention. I don't think placeholder is an exposed prop in the API but funny thing is that when the placeholder='' instead of placeholder='Search', the css logic works as expected in Chrome but not in Safari. In Safari, when the placeholder is an empty string, the clear action is visible. I found out while I was like 'Ohh placeholder-shown, let me play with this' 😄
Interesting, this is what I see in Arc. I imagine it's because there is no placeholder to show, so it's now shown 😅 
I want to ignore this use case, at least for dotcom, because there should always be a placeholder. Maybe we can add a type error in TextInput for empty placeholder |
Clear action is only visible when there is something to clear
selectpanel-clear-action.mov