[UI] Focus escapes every panel: SpotlightContainerDecorator ignores restrict passed in its config

[Kisnov]

Moonfin version

2.8.2

Platform

Tizen (Samsung)

Platform version

Tizen 9 — firmware T-KSU2EDDEUC-0090-2130.0

TV model

TU43DU7105KXXC (43", 3840x2160)

Where does it happen?

Library — the Sort & Filter panel and the settings panel beside it, but the cause is repo-wide.

Input method

D-pad / remote

Steps to reproduce

1. Open a library and open the Sort & Filter panel.
2. From the first row, press Up — focus leaves the panel and lands on the poster grid / letter strip behind it.
3. Press Left from anywhere in the panel — focus leaves the same way.
4. The settings panel next to it behaves identically.

Expected: the panel is declared restrict: 'self-only', so 5-way should stay inside until the panel is dismissed.

Photo or video of the problem

It is easy to check. I can attach vid if needed

---

Cause

SpotlightContainerDecorator never reads restrict from its config object. It takes the value from the spotlightRestrict prop, which defaults to 'self-first':

// @enact/spotlight/SpotlightContainerDecorator/SpotlightContainerDecorator.js
spotlightRestrict = props.spotlightRestrict === void 0 ? 'self-first' : props.spotlightRestrict,
...
useSpotlightContainer({ …, restrict: spotlightRestrict, containerConfig, … })

and useSpotlightContainer then applies it with setProps({…, restrict}), which overwrites whatever containerConfig carried.

So this, which is how nearly every container in the app is written:

const SortPanelContainer = SpotlightContainerDecorator({enterTo: 'last-focused', restrict: 'self-only'}, 'div');

silently runs as self-first. enterTo is unaffected — it rides through containerConfig and still works — which is why the panels behave correctly in every other respect and this has gone unnoticed.

self-first means prefer elements inside, but leave when there is nothing that way, which is exactly the reported behaviour: up from the top row leaves, left leaves.

Scope

	count
Containers passing restrict: in the HOC config (ignored)	56, across 39 files
Containers passing spotlightRestrict as a prop (works)	4

The four that do it correctly are ServerMessagesDialog, UpdateNotification, and NextEpisodeContainer in both players — and those are the ones that do not leak focus. That contrast is the clearest evidence for the diagnosis.

Suggested fix

Pass it as a prop on the element:

<SortPanelContainer spotlightRestrict="self-only" …>

The config key can stay or go; it does nothing either way. Worth deciding whether to fix all 56 at once or start with the panels where focus escaping is most disruptive (Library filter panel, settings panel, dialogs) and verify on a real set first — the change alters 5-way behaviour app-wide, so it wants testing on a panel rather than only reasoning.

Happy to open the PR.

Not caused by #439

Reproduces with no search field present and with every facet section collapsed. Raised while testing that PR, but it predates it.

🤖 Generated with Claude Code

[github-actions]

Thanks for the report, @Kisnov.

Before anyone can pick this up it needs a little more from you, so it has been labelled Missing Screenshot.

A photo or recording of the screen is missing

UI issues are very hard to act on from a description alone, and a TV has no screenshot button.

1. Point your phone at the TV and take a photo of exactly what you're seeing.
2. Drag it straight into a comment below.

If the problem is motion, a flicker, or focus landing in the wrong place, then a short video is far more useful than a still.

Each label comes off automatically once that piece is sorted.

[Kisnov]

Correction: the repo already has the fix, and the scope is smaller than I said

Two things in the original report need amending.

The suggested fix was wrong. I proposed passing spotlightRestrict="self-only" as a prop. That would work, but it is not how this app holds panels. The mechanism already in use is leaveFor, which — unlike restrict — does reach the container through containerConfig:

// views/Settings/settingsSpottables.js
// Every screen holds focus on its own, so a 5-way press at the edge stays put rather than
// jumping to whatever the panel is sitting on top of.
export const ViewContainer = SpotlightContainerDecorator({
	enterTo: 'last-focused',
	restrict: 'self-only',
	leaveFor: {left: '', right: '', up: '', down: ''}
}, 'div');

28 containers already carry it, the settings screens among them. That is exactly why the main settings panel holds focus while the library's two panels do not — they were written without it.

The scope figure was misleading. I wrote "56 containers affected". The accurate count is 52 declarations without leaveFor, but most of them should not have it: rows, tab bars, the nav bar, the media rows and the poster grid are all meant to let focus out. Only panels and overlays sitting on top of something want to trap it. So this is not a 52-site sweep — it is a per-container judgement about which ones are modal in nature.

The underlying analysis stands: restrict in the config object is silently overwritten by the spotlightRestrict prop default of self-first, and that is why these panels leak. But the conclusion should have been "these panels forgot leaveFor" rather than "56 containers are broken".

#442 fixes the two library panels using the existing pattern, scoped that way on purpose so the approach can be checked on a set first.

Worth considering separately: since restrict in the config does nothing, leaving it there reads as though it does. Either dropping it or moving to the prop would make the intent honest — but that is cosmetic next to the containers that are actually leaking.

🤖 Generated with Claude Code