Roku Developer Program

[LucasMaciel]

Trouble intercepting "up" key to change focus from MarkupGrid to categories

Hi everyone! I need some help handling key navigation between two components in my SceneGraph app.

I’m using a <MarkupGrid> with numColumns="1" to display a vertical list of channels:

<MarkupGrid
    id="channelList"
    translation="[20, 100]"
    numColumns="1"
    itemSize="[440, 100]"
    itemComponentName="ChannelItem"
    focusable="true"
/>
    

My intention is: when the user is focused on the first item (itemFocused = 0) and presses the up key, the focus should move from the channel list (channelList) to a RowList of categories (categoryRowList).

Here’s the logic I’m using inside onKeyEvent:

if (key = "up") and (m.channelList.hasFocus() = true)
    if m.channelList.itemFocused = 0 then
        print "⬆️ First item focused — moving focus to categories"
        m.channelList.setFocus(false)
        m.categoryRowList.setFocus(true)
        return true
    end if
end if
    

Expected behavior:
When pressing up on the first item, focus should go to categoryRowList.

Actual behavior:
Instead of transferring the focus, it loops to the last item in the channelList, as if I had pressed down on the last item.

I’ve also tried another approach using the observeField("itemFocused", "onItemFocusChanged") pattern:

function onItemFocusChanged()
    m.currentIndex = m.channelList.itemFocused
    print "🔍 Focused item: " + m.currentIndex.toStr()

    currentIndex = m.channelList.itemFocused
    print "🎯 Current focus: "; currentIndex.toStr(); " | Last: "; m.lastFocusedIndex.toStr()

    if currentIndex = 63 and m.lastFocusedIndex = 0
        print "🔼 Second UP on index 0 → switching focus"
        m.categoryRowList.setFocus(true)
        m.channelList.setFocus(false)
    end if

    m.lastFocusedIndex = currentIndex
end function
    

And even created a helper:

function transferFocusToCategories()
    print "🔼 Transferring focus to categories (via ChannelItem)"
    m.allowFocusTransfer = false
    m.channelList.setFocus(false)
    m.categoryRowList.setFocus(true)
end function
    

Unfortunately, none of these approaches work reliably. It seems like MarkupGrid (and even MarkupList, which I used before) internally handles the up/down keys, making it difficult to override the default behavior.

Question:
How can I correctly intercept the up key on the first item in a MarkupGrid to move focus to another component?

Thanks in advance!

[speechles]

Function onKeyEvent(key, press) as Boolean
    if press
        if (key = "up") and m.channelList.isInFocusChain()
            m.categoryRowList.setFocus(true)
            return true
        end if
    end if
End Function

Stop using "setFocus(false)" at all. The MarkupList/Grid will swallow all the keypresses it can use. You won't get to react on them as it is done interally. Once it gets to the top or bottom it will pass those keys on. Since it can no longer go up or down once at the top or bottom. It will pass these keys into your MarkupList OnKeyEvent() function. So you do not need to check really if you are at the top and bottom of the markupgrid. If you press UP and it triggers in your OnKeyEvent the user was at the top of the grid. If they press DOWN and it trigger in your OnKeyEvent they were at the bottom of the grid.

If you can show the actual XML/Brightscript for your code it would be easier to show you what you are doing wrong. You are making it harder than it actually is to do.