ListView and initial focus for Custom Item Templates #1546

Open
toddpi314 opened this Issue Nov 9, 2015 · 5 comments

Projects

None yet

4 participants

@toddpi314

We are seeing that the first item in our ListViews are not getting the focus container when using the FocusXY navigation to do the focus in.

It appears our bound items are not qualifying somewhere here: https://github.com/winjs/winjs/blob/a59be9d74fe2245cc11ab289d9677158f9c8eabf/src/js/WinJS/Controls/ListView.js#L2810-L2811

The first list item does get set on the document.activeElement, but we don't see the list-view respond with either the win-focused class or the win-focusedoutline element appended to the respective win-item.

Looks like a bug.

@toddpi314 toddpi314 changed the title from ListView and initial focus via TabManager to ListView and initial focus for Custom Item Templates Nov 9, 2015
@toddpi314

Confirmed that the issue does not occur when using the 'tab' keystroke to 'enter' focus into the List-View. Looks like we just need a condition to detect when focus-In comes from the FocusXY logic...

@toddpi314

Based on the code, it looks like a check for _hasKeyboardFocus might be appropriate.

@jdalton jdalton added this to the Future milestone Nov 12, 2015
@humale
Contributor
humale commented May 23, 2016

Hi @toddpi314. I was wondering if you could make a PR for the workaround that you've proposed.

@staxmanade
staxmanade commented Nov 23, 2016 edited

Doing as @toddpi314 suggested is also working for me. Can't speak to the rammifications of other use-cases...) but it's working well so far.

                        // In the old layouts, index will be -1 if a group header got focus
                        if (entity.index !== _Constants._INVALID_INDEX) {
-                            if (this._keyboardFocusInbound || this._selection._keyboardFocused()) {
+                            {
                                if ((entity.type === _UI.ObjectType.groupHeader && event.target === element) ||
                                        (entity.type === _UI.ObjectType.item && event.target.parentNode === element)) {
                                    // For items we check the parentNode because the srcElement is win-item and element is win-itembox,
                                    // for header, they should both be the win-groupheader
                                    this._drawFocusRectangle(element);
                                }
                            }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment