Roku Developer Program

Join our online forum to talk to Roku developers and fellow channel creators. Ask questions, share tips with the community, and find helpful resources.
cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
AdAmerica
Reel Rookie

Focus Management Issue in Roku Channel - TextEditBox Not Receiving Focus

Jump to solution

I am developing my first Roku channel and facing an issue with focus management. I have a simple scene with two TextEditBox elements for Display ID and PIN, a Button, and a Label for error messages. The problem is that only the button seems to be receiving focus and working as expected. When I press the "Up" button on the remote, the focus index changes (as confirmed by debug statements), but the TextEditBox elements do not receive focus, and the on-screen keyboard does not appear.

Code Snippets:

helloworld.xml:
<?xml version="1.0" encoding="utf-8" ?>
<component name="HelloWorld" extends="Scene">
    <children>
        <!-- Label for Display ID -->
        <Label
            id="displayIdLabel"
            text="Display ID:"
            translation="[100, 100]"
            height="40"
            width="300"
            font="font:MediumBoldSystemFont"
        />

        <!-- TextEditBox for Display ID -->
        <TextEditBox
            id="displayIdBox"
            translation="[400, 100]"
            height="40"
            width="300"
            focusable="true"
        />

        <!-- Label for PIN -->
        <Label
            id="pinLabel"
            text="PIN:"
            translation="[100, 200]"
            height="40"
            width="300"
            font="font:MediumBoldSystemFont"
        />

        <!-- TextEditBox for PIN -->
        <TextEditBox
            id="pinBox"
            translation="[400, 200]"
            height="40"
            width="300"
            focusable="true"
        />

        <!-- Enter Button -->
        <Button
            id="enterButton"
            text="Enter"
            translation="[300, 300]"
            height="40"
            focusable="true"
        />

        <!-- Label for Error Messages -->
        <Label
            id="errorMessage"
            text=""
            translation="[100, 400]"
            height="40"
            width="600"
            font="font:MediumBoldSystemFont"
            color="0xFF0000"
        />
    </children>
<!-- BrightScript Portion -->
<script type="text/brightscript" uri="pkg:/components/helloworld.brs" />
<!-- End of BrightScript Portion -->
</component>

helloworld.brs:
sub init()
    m.top.setFocus(true) ' Set focus to the scene to enable key events
    m.focusIndex = 0 ' Initialize focus index

    ' Get references to UI elements
    m.displayIdBox = m.top.findNode("displayIdBox")
    m.pinBox = m.top.findNode("pinBox")
    m.enterButton = m.top.findNode("enterButton")

    ' Observe button selection
    m.enterButton.observeField("buttonSelected", "onEnterButtonClicked")

   
    ' Observe TextEditBox focus
    m.displayIdBox.observeField("focusedChild", "onTextEditBoxFocused")
    m.pinBox.observeField("focusedChild", "onTextEditBoxFocused")
end sub

' Called when the TextEditBox is focused
sub onTextEditBoxFocused()
    ' Your logic here to open keyboard
    print "TextEditBox focused!"
end sub


' Called when the Enter button is clicked
sub onEnterButtonClicked()
    ' Your logic here
    print "Enter button clicked!"
end sub

' Function to handle key events
function onKeyEvent(key as String, press as Boolean) as Boolean
    handled = false
    if press then
        if key = "up"
            m.focusIndex = (m.focusIndex - 1 + 3) mod 3
            shiftFocus()
            handled = true
            print "Current Focus Index: "; m.focusIndex
        else if key = "down"
            m.focusIndex = (m.focusIndex + 1) mod 3
            shiftFocus()
            handled = true
            print "Current Focus Index: "; m.focusIndex
        else if key = "OK"
            ' Your logic for OK key
            handled = true
        end if
    end if
    return handled
end function

' Function to shift focus based on m.focusIndex
sub shiftFocus()
    if m.focusIndex = 0
        m.displayIdBox.setFocus(true)
    else if m.focusIndex = 1
        m.pinBox.setFocus(true)
    else if m.focusIndex = 2
        m.enterButton.setFocus(true)
    end if
end sub

sub loadImage(url as String)
    ' Create a Poster node to display the PNG
    m.poster = CreateObject("roSGNode", "Poster")
    m.poster.uri = url
    m.poster.translation = [0, 0]
    m.poster.width = 1920 ' Full screen width
    m.poster.height = 1080 ' Full screen height

    ' Add the Poster to the scene
    m.top.appendChild(m.poster)
end sub

Troubleshooting Steps Taken:

  1. Set focusable="true" for TextEditBox and Button.
  2. Used observeField to listen for button clicks.
  3. Added debug statements to confirm focus index changes.

Questions:

  1. How can I ensure that the TextEditBox elements receive focus?
  2. Why is the on-screen keyboard not appearing for TextEditBox elements?
  3. Is there anything wrong with my focus management logic?

Any help would be greatly appreciated!

 
0 Kudos
1 Solution

Accepted Solutions
sanity-check
Roku Guru

Re: Focus Management Issue in Roku Channel - TextEditBox Not Receiving Focus

Jump to solution

This isn't directly answering your question, but if you're expecting a keyboard to appear automatically when the TextEditBox is focused, you'll be disappointed.

The way I tend to handle these forms is to display the field contents on buttons (disguised/extended to look like text inputs), then when these are selected I pop up an overlay containing a Keyboard (or DynamicKeyboard/etc as cert requriments + functionality demand) to do the actual text entry. An "OK" button dismisses the keyboard and I populate the button with the updated text. A "StandardKeyboardDialog" could work if you don't have a fussy designer involved.

 

View solution in original post

5 REPLIES 5
sanity-check
Roku Guru

Re: Focus Management Issue in Roku Channel - TextEditBox Not Receiving Focus

Jump to solution

This isn't directly answering your question, but if you're expecting a keyboard to appear automatically when the TextEditBox is focused, you'll be disappointed.

The way I tend to handle these forms is to display the field contents on buttons (disguised/extended to look like text inputs), then when these are selected I pop up an overlay containing a Keyboard (or DynamicKeyboard/etc as cert requriments + functionality demand) to do the actual text entry. An "OK" button dismisses the keyboard and I populate the button with the updated text. A "StandardKeyboardDialog" could work if you don't have a fussy designer involved.

 

sanity-check
Roku Guru

Re: Focus Management Issue in Roku Channel - TextEditBox Not Receiving Focus

Jump to solution

Oh, also - maybe more useful:

Try

m.top.observeField("focusedChild", "onFocusedChildChanged")

...that should call a function whenever focus changes - I don't think you'll get anything from observing focusedChild on an actual child.

AdAmerica
Reel Rookie

Re: Focus Management Issue in Roku Channel - TextEditBox Not Receiving Focus

Jump to solution

Got it, so this is nothing like android development lol. 😆

It's funny because I asked the big 3 AI's and chatgpt swore up and down it should automatically popup when focused. Bing wasn't sure what to do. And bard hallucinated and said there was a "JavaScript" keyboard that could be ran in the brightscript.

 

I will go ahead and try out your solution and let you know. Thank you for the assistance!

0 Kudos
sanity-check
Roku Guru

Re: Focus Management Issue in Roku Channel - TextEditBox Not Receiving Focus

Jump to solution

Yeah, welcome to the wild west!

Roku dev is too niche for ChatGPT etc to be competent, I think - Stack Overflow is not that useful either, which is related.

There's a Slack chat which people find helpful (it gets linked from these forums fairly often) but I prefer to leave answers which are easily searchable in future so I haven't looked in on that. Maybe I need to rethink my opposition to siloed content in the age of AI though...

Good luck

0 Kudos

Re: Focus Management Issue in Roku Channel - TextEditBox Not Receiving Focus

Jump to solution

Can you give me an example of your solution with a sample project ?

@sanity-check 

Beginner in ROKU
0 Kudos
Need Assistance?
Welcome to the Roku Community! Feel free to search our Community for answers or post your question to get help.

Become a Roku Streaming Expert!

Share your expertise, help fellow streamers, and unlock exclusive rewards as part of the Roku Community. Learn more.