Epg Component Focus Issue

:warning: Before you continue


Before submitting a bug report, please review our troubleshooting documentation at Troubleshoot Issues | Vega Troubleshooting

If you still want to file a bug report, please make sure to fill in all the details below and provide the necessary information.

NOTE: PLEASE ONLY REPORT A SINGLE BUG USING THIS TEMPLATE.
If you’re experiencing multiple issues, please file a separate report for each.


:backhand_index_pointing_right: Bug Description


1. Summary

Focus on EPG Component won’t go anywhere except from the same component. Focus wont go to the left drawer.

App Name:
App Link on Amazon Appstore (found through Developer Console → Actions column in App List → View on Amazon.com):

Vix

Bug Severity
Select one that applies

  • x Impacts operation of app
  • Blocks current development
  • Improvement suggestion
  • Issue with documentation (If selected, please share the doc link and describe the issue)
  • Other

2. Steps to Reproduce

  1. Focus on epg element
  2. Try to move focus outside element
  3. Focus wont go outside of the element.

3. Observed Behavior

Explain what actually happened, noting any discrepancies or malfunctions.

Focus wont go to the drawer element, even with TVFocusGuideView

4. Expected Behavior

Describe what you expected the SDK to do under normal operation.

Focus is able to go outside. 

4.a Possible Root Cause & Temporary Workaround

Fill out anything you have tried. If you don’t know, N/A is acceptable

Focus management

5. Logs or crash report

(Please make sure to provide relevant logs as attachment)

For crash issues, please refer this guide for faster troubleshooting: Detect Where the App Crash Originates | Design and Develop Vega Apps

  • App/Device Logs

  • Crash Logs

  • Crash Report

  • For issues with Kepler Studio Extension, please share log files from below folders:

     ~/.vscode/extensions/amazon.kepler-extension-<version>/ExtensionLogs
     ~/.vscode/extensions/amazon.kepler-ui-extension-<version>/ExtensionLogs
    

6. Environment

Please fill out the fields related to your bug below:

  • SDK Version: Output of kepler --version

  • 0.20.3719

  • App State: [Foreground/Background]

  • OS Information
    Please ssh into the device via kepler exec vda shelland copy the output from cat /etc/os-releaseinto the answer section below. Note, if you don’t have a simulator running or device attached kepler exec vda shell will respond with vda: no devices/emulators found

    <!-- Answer here if applicable --> 
    

7. Example Code Snippet / Screenshots / Screengrabs

Include any relevant code or component setup in React Native that can help reproduce the bug.

  return (
    <View
      style={styles.container}
    >
      {data && currentCategory && (
        <>
          {header && !isFullScreenCalled && (
            <EpgHeader
              header={header}
              isShouldFocusCategories={shouldFocusCategories}
              setCurrentCategory={setCurrentCategory}
              categories={data?.epgCategories?.epgCategoriesEdges}
              currentCategory={currentCategory}
              setCurrentCategoryName={setCurrentCategoryName}
            />
          )}
          <View>
            <Text variant={TextVariant.TEXT_2XL}>{currentCategoryName}</Text>
          </View>
          <TVFocusGuideView
            autoFocus
          >
            <KeplerEPG
              ref={epg}
              onTileFocus={handleFocus}
              onScroll={({ row }): void => {
                setDebouncedRow(row + 2);
              }}
              onMenu={({ payload, title }): void => {
                console.log(`Menu button pressed on "${title}". Data:\n${JSON.stringify(payload, null, 4)}`);
              }}
              onTilePress={({ payload, title }): void => {
                console.log(`Pressed on "${title}". Data:\n${JSON.stringify(payload, null, 4)}`);
                // @ts-ignore
                openFullScreen(payload);
              }}
              features={[]}
              tileLayout="standard"
              focusBorder={{
                enabled: true,
                color: '#FF7B37',
              }}
              tileStyle={TILE_STYLE}
              logoStyle={LOGO_STYLE}
            />
          </TVFocusGuideView>
        </>
      )}
    </View>

:backhand_index_pointing_right: Playback Issues


If this is a playback issue, please provide your content URL, any pre-conditions (like geo-location), and let us know if it’s x86 or arm7.


<!-- Describe your playback issue if applicable -->

Please share the following details in addition:_

  • Player SDK: [Bitmovin, Shaka, ...]
  • Player SDK Version: [e.g. 1.23]
    • Audio Codecs: [AAC, ...]
    • Video Codecs: [h.264, mp4]
    • Manifest Types: [m3u8, dash, etc ..]

Q: If applicable, please provide your media/content url
If this is created dynamically, tokenized, etc please provide a way for us to access it

[N/A or Content / Media Url for testing]

Q: Are there any special headers required to reproduce the issue you are facing?

[N/A or Insert Headers]

Additionally please provide the following if possible
Provide Screenshots / Screengrabs / Logs. Please include as much information as you can that will help debug.

<!-- Answer here if applicable --> 

:backhand_index_pointing_right: Additional Context


Any Additional Context you would like to provide?
Add any other relevant information, such as recent updates to the SDK, dependencies, or device OS that may affect the bug.

<!-- Answer here if applicable  --> 

Hi @Sofia_Lozada_Tenorio

We will look into this issue and update you ASAP.
In the meantime, please share your logs here.
I’ll try reproducing with the code snippet you have provided, however, if I require more assistance from you to look into this issue better, I’ll request so here.

Warm regards,
Ivy

Hello, which logs should I share?

Hi @Sofia_Lozada_Tenorio

We were able to reproduce this issue, so we do not require logs from your end as of now. I’ll request you here if we require anything.
Thanks.

Warm regards,
Ivy

Thank you for reporting this focus management issue with the EPG component.

Temporary Workaround in Progress:

We’ve identified the root cause of the top-row focus issue and are actively working on a workaround that will enable focus to escape from the top row of the EPG component. This should help if your navigation flow requires moving focus upward (e.g., to a top navigation bar or header elements).

Known Limitation:

With the current architecture and framework, we’ve identified a limitation that is causing issues with releasing focus from the left-hand side of the component. We’re working to address this in a future update.

Timeline:

The temporary workaround for top-row focus escape is currently in development and will be available soon. We’ll update this thread once it’s ready for testing.

Help Us Prioritize:

To ensure we’re addressing your specific needs, could you share:

Which direction(s) do you primarily need focus to escape from the EPG?
What UI elements are you trying to navigate to from the EPG component?
This information will help us determine if the upcoming workaround will unblock your development, or if we need to explore additional solutions for your use case.

We appreciate your patience and will keep you updated on our progress.

I need to primarily focus to the top, and to the drawer menu on the left.

We need to navigate to buttons.