Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(material/autocomplete): closing immediately when input is focused programmatically #21081

Merged
merged 1 commit into from
Feb 22, 2022
Merged

fix(material/autocomplete): closing immediately when input is focused programmatically #21081

merged 1 commit into from
Feb 22, 2022

Conversation

crisbeto
Copy link
Member

Each autocomplete has a click listener on the body that closes the panel when the user has clicked somewhere outside of it. This breaks down if the panel is opened through a click outside of the form field, because we bind the listener before the event has bubbled all the way to the body so when it does get there, it closes immediately.

These changes fix the issue by taking advantage of the fact that focus usually moves on mousedown so for "real" click the input will have already lost focus by the time the click event happens.

Fixes #3106.

@crisbeto crisbeto added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent target: patch This PR is targeted for the next patch release labels Nov 18, 2020
@google-cla google-cla bot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Nov 18, 2020
jelbourn
jelbourn approved these changes Nov 25, 2020
View reviewed changes
Copy link
Member

@jelbourn jelbourn left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@jelbourn jelbourn added the action: merge The PR is ready for merge by the caretaker label Nov 25, 2020
@crisbeto crisbeto force-pushed the 3106/autocomplete-outside-focus branch from 93cb86f to bb163c6 Compare August 2, 2021 19:31
@andrewseguin andrewseguin added needs rebase and removed cla: yes PR author has agreed to Google's Contributor License Agreement labels Dec 28, 2021
@crisbeto
fix(material/autocomplete): closing immediately when input is focused…
eeb3bd0 
… programmatically

Each autocomplete has a `click` listener on the body that closes the panel when the
user has clicked somewhere outside of it. This breaks down if the panel is opened
through a click outside of the form field, because we bind the listener before the
event has bubbled all the way to the `body` so when it does get there, it closes
immediately.

These changes fix the issue by taking advantage of the fact that focus usually moves
on `mousedown` so for "real" click the input will have already lost focus by the time
the `click` event happens.

Fixes angular#3106.
@crisbeto crisbeto force-pushed the 3106/autocomplete-outside-focus branch from bb163c6 to eeb3bd0 Compare January 3, 2022 09:58
@andrewseguin andrewseguin merged commit c0ed5ce into angular:master Feb 22, 2022
andrewseguin pushed a commit that referenced this pull request Feb 22, 2022
@crisbeto @andrewseguin
fix(material/autocomplete): closing immediately when input is focused…
6b76469 
… programmatically (#21081)

Each autocomplete has a `click` listener on the body that closes the panel when the
user has clicked somewhere outside of it. This breaks down if the panel is opened
through a click outside of the form field, because we bind the listener before the
event has bubbled all the way to the `body` so when it does get there, it closes
immediately.

These changes fix the issue by taking advantage of the fact that focus usually moves
on `mousedown` so for "real" click the input will have already lost focus by the time
the `click` event happens.

Fixes #3106.

(cherry picked from commit c0ed5ce)
This was referenced Feb 25, 2022
Closed
Closed
crapStone pushed a commit to Calciumdibromid/CaBr2 that referenced this pull request Mar 8, 2022
Update angularmaterial monorepo to v13.2.4 (#1188)
8549850 
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#&#8203;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 ([#&#8203;14806](angular/components#14806)) |
| [81898ca5f6](angular/components@81898ca) | fix | **drag-drop:** stop pointer events on placeholder ([#&#8203;24404](angular/components#24404)) |

##### material

| Commit | Type | Description |
| -- | -- | -- |
| [6b76469b4a](angular/components@6b76469) | fix | **autocomplete:** closing immediately when input is focused programmatically ([#&#8203;21081](angular/components#21081)) |
| [3ea76419c8](angular/components@3ea7641) | fix | **autocomplete:** use narrow value for aria-haspopup ([#&#8203;15361](angular/components#15361)) |
| [9a12eabf6b](angular/components@9a12eab) | fix | **button-toggle:** unable to override elevation and high contrast styling applied incorrectly ([#&#8203;14722](angular/components#14722)) |
| [cbd4b0ce4f](angular/components@cbd4b0c) | fix | **checkbox:** clear static aria attributes from host nodes ([#&#8203;17092](angular/components#17092)) |
| [f6eaa7c1cf](angular/components@f6eaa7c) | fix | **form-field:** use correct color for form fields in high contrast mode ([#&#8203;24422](angular/components#24422)) |
| [39d7834797](angular/components@39d7834) | fix | **radio:** clicks not propagating to wrapper elements ([#&#8203;24459](angular/components#24459)) |
| [5988b8f77b](angular/components@5988b8f) | fix | **radio:** not checked on first click if partially visible ([#&#8203;19505](angular/components#19505)) |
| [33716f124b](angular/components@33716f1) | fix | **select:** arrow highlighted state not updating in Safari ([#&#8203;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 ([#&#8203;24338](angular/components#24338)) |

##### material-experimental

| Commit | Type | Description |
| -- | -- | -- |
| [4198f5b5dc](angular/components@4198f5b) | fix | **mdc-dialog:** align change detection with non-MDC version ([#&#8203;24451](angular/components#24451)) |
| [45836f924d](angular/components@45836f9) | fix | **mdc-list:** fix typo in action-list css class ([#&#8203;24448](angular/components#24448)) |
| [7ca02495cd](angular/components@7ca0249) | fix | **mdc-list:** use body-1 rather than subtitle-1 typography for list items ([#&#8203;24417](angular/components#24417)) |
| [c9a15476e8](angular/components@c9a1547) | fix | **mdc-select:** target correct element with typography ([#&#8203;24258](angular/components#24258)) |
| [bd3f39fb15](angular/components@bd3f39f) | perf | **mdc-table:** reduce bundle size ([#&#8203;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>
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Mar 25, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@jelbourn jelbourn jelbourn approved these changes

Assignees

@jelbourn jelbourn

Labels
action: merge The PR is ready for merge by the caretaker P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent target: patch This PR is targeted for the next patch release
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

autocomplete panel doesn't pop up when triggering focus on the input programatically
3 participants
@crisbeto @jelbourn @andrewseguin