Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

NgFor loses focus on reorder to lower index

See original GitHub issue

🐞 bug report

Affected Package

@angular/core

Is this a regression?

Description

When an element within an ngFor is re-ordered and that element contains the currently focused control, focus is not preserved if the re-ordering moves the element to a lower index (i.e. towards the top of the list). However if the element is re-ordered to a higher index, focus on the control is preserved. This happens whether or not a trackBy function is used.

🔬 Minimal Reproduction

https://stackblitz.com/edit/angular-mmiwej

Select the Down radio button.
Tab to the Reorder button for item 1.
Press enter. => Item 1 is moved to position 2 and the Reorder button remains focused.
Select the Up radio button.
Repeat steps 2-3. => Item 1 is moved back to position 1 and the Reorder button loses focus.

🌍 Your Environment

Angular Version:




Angular CLI: 7.0.6
Node: 8.11.3
OS: win32 x64
Angular: 7.0.4
... animations, cdk, common, compiler, compiler-cli, core, forms
... http, language-service, material, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.3
@angular-devkit/build-angular     0.6.3
@angular-devkit/build-optimizer   0.6.3
@angular-devkit/core              0.6.3
@angular-devkit/schematics        7.0.6
@angular/cli                      7.0.6
@ngtools/webpack                  6.0.3
@schematics/angular               7.0.6
@schematics/update                0.10.6
rxjs                              6.3.3
typescript                        3.1.6
webpack                           4.8.3

Issue Analytics

State:
Created 5 years ago
Comments:10 (6 by maintainers)

Top GitHub Comments

2reactions

trotylcommented, Dec 21, 2018

Detach isn’t destroy, it’s only separated from visible DOM tree, all of its state are kept. But focusing status isn’t actually a state of that node, but a state of document, when the current focusing node moved out of visible document, the document must recalculate the state of current active node.

0reactions

angular-automatic-lock-bot[bot]commented, Sep 14, 2019

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.}

Top Results From Across the Web

Input loses focus when filtering an array, rendered using ...

I have a list of users rendered using *ngFor. The user has the option to filter the list by typing ...

ion-select: Select One or Multiple Value Boxes or Placeholders

ion-select is represented by selected value(s), or a placeholder, and dropdown icon. When you tap select, a dialog box appears with an easy...

MultiSelect - PrimeNG - PrimeFaces

originalEvent: browser event, Callback to invoke when multiselect loses focus. onPanelShow, -, Callback to invoke when overlay panel becomes visible.

Input field loses focus on ngFor filter (forked) - StackBlitz

Enter Zen Mode. Project. Download Project. Info. Input field loses focus on ngFor filter (forked). Clarity Angular and Clarity Core v5 starter template....

jQWidgets Release History

Fixed an issue in jqxGrid regarding its focus method behavior. ... What's Improved: - Widgets now use lower default z-index values.