fix(material/select): arrow highlighted state not updating in Safari #15281
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
googlebot
added
the
cla: yes
crisbeto
force-pushed
the
select-arrow-stuck
branch
from
0431fd3
to
f25e89a
Compare
crisbeto
added
the
P3
jelbourn
added
pr: lgtm
action: merge
andrewseguin
removed
the
cla: yes
| // which means that its highlighted styling will be stuck in an incorrect state. We can get | ||
| // Safari to redraw it by adding a transform. | ||
| .mat-form-field.mat-focused & { | ||
| transform: translateX(0); |
There was a problem hiding this comment.
This will override the above styles which are applying transform: translateY. Is there another way that can force Safari to redraw?
There was a problem hiding this comment.
I've moved the transform to a different element.
andrewseguin
removed
the
action: merge
crisbeto
force-pushed
the
select-arrow-stuck
branch
from
f25e89a
to
160e576
Compare
Fixes the color of the select arrow not updating correctly when focusing and blurring in Safari. It seems like Safari wasn't recalculating the styles, for some reason.
crisbeto
force-pushed
the
select-arrow-stuck
branch
from
160e576
to
e01f8b0
Compare
crisbeto
changed the title
This was referenced Feb 25, 2022
crapStone
pushed a commit
to Calciumdibromid/CaBr2
that referenced
this pull request
Mar 8, 2022
This PR contains the following updates: | Package | Type | Update | Change | |---|---|---|---| | [@angular/cdk](https://github.com/angular/components) | dependencies | patch | [`13.2.3` -> `13.2.4`](https://renovatebot.com/diffs/npm/@angular%2fcdk/13.2.3/13.2.4) | | [@angular/material](https://github.com/angular/components) | dependencies | patch | [`13.2.3` -> `13.2.4`](https://renovatebot.com/diffs/npm/@angular%2fmaterial/13.2.3/13.2.4) | --- ### Release Notes <details> <summary>angular/components</summary> ### [`v13.2.4`](https://github.com/angular/components/blob/HEAD/CHANGELOG.md#​1324-plastic-mug-2022-02-23) [Compare Source](angular/components@13.2.3...13.2.4) ##### cdk | Commit | Type | Description | | -- | -- | -- | | [74bae85bc5](angular/components@74bae85) | fix | **drag-drop:** incorrectly sorting element inside dialog with blocked scrolling ([#​14806](angular/components#14806)) | | [81898ca5f6](angular/components@81898ca) | fix | **drag-drop:** stop pointer events on placeholder ([#​24404](angular/components#24404)) | ##### material | Commit | Type | Description | | -- | -- | -- | | [6b76469b4a](angular/components@6b76469) | fix | **autocomplete:** closing immediately when input is focused programmatically ([#​21081](angular/components#21081)) | | [3ea76419c8](angular/components@3ea7641) | fix | **autocomplete:** use narrow value for aria-haspopup ([#​15361](angular/components#15361)) | | [9a12eabf6b](angular/components@9a12eab) | fix | **button-toggle:** unable to override elevation and high contrast styling applied incorrectly ([#​14722](angular/components#14722)) | | [cbd4b0ce4f](angular/components@cbd4b0c) | fix | **checkbox:** clear static aria attributes from host nodes ([#​17092](angular/components#17092)) | | [f6eaa7c1cf](angular/components@f6eaa7c) | fix | **form-field:** use correct color for form fields in high contrast mode ([#​24422](angular/components#24422)) | | [39d7834797](angular/components@39d7834) | fix | **radio:** clicks not propagating to wrapper elements ([#​24459](angular/components#24459)) | | [5988b8f77b](angular/components@5988b8f) | fix | **radio:** not checked on first click if partially visible ([#​19505](angular/components#19505)) | | [33716f124b](angular/components@33716f1) | fix | **select:** arrow highlighted state not updating in Safari ([#​15281](angular/components#15281)) | | [fc204e4f4d](angular/components@fc204e4) | fix | **sidenav:** prevent focus from entering hidden sidenav if child element has a visibility | | [5e41a0ad09](angular/components@5e41a0a) | fix | **tabs:** use buttons for paginator also tab-header and mdc ([#​24338](angular/components#24338)) | ##### material-experimental | Commit | Type | Description | | -- | -- | -- | | [4198f5b5dc](angular/components@4198f5b) | fix | **mdc-dialog:** align change detection with non-MDC version ([#​24451](angular/components#24451)) | | [45836f924d](angular/components@45836f9) | fix | **mdc-list:** fix typo in action-list css class ([#​24448](angular/components#24448)) | | [7ca02495cd](angular/components@7ca0249) | fix | **mdc-list:** use body-1 rather than subtitle-1 typography for list items ([#​24417](angular/components#24417)) | | [c9a15476e8](angular/components@c9a1547) | fix | **mdc-select:** target correct element with typography ([#​24258](angular/components#24258)) | | [bd3f39fb15](angular/components@bd3f39f) | perf | **mdc-table:** reduce bundle size ([#​24309](angular/components#24309)) | #### Special Thanks Alireza Ebrahimkhani, Arthur Ming, Jeri Peier, Kristiyan Kostadinov, Miles Malerba, Paul Gschwendtner and renovate\[bot] <!-- CHANGELOG SPLIT MARKER --> </details> --- ### Configuration 📅 **Schedule**: At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about these updates again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, click this checkbox. --- This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate). Co-authored-by: cabr2-bot <cabr2.help@gmail.com> Reviewed-on: https://codeberg.org/Calciumdibromid/CaBr2/pulls/1188 Reviewed-by: Epsilon_02 <epsilon_02@noreply.codeberg.org> Co-authored-by: Calciumdibromid Bot <cabr2_bot@noreply.codeberg.org> Co-committed-by: Calciumdibromid Bot <cabr2_bot@noreply.codeberg.org>
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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.
Fixes the color of the select arrow not updating correctly when focusing and blurring in Safari. It seems like Safari wasn't recalculating the styles, for some reason.
Fixes #16522