Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Element loosing focus after onClick #68

Open
salahbm opened this issue Jun 21, 2024 · 1 comment
Open

Element loosing focus after onClick #68

salahbm opened this issue Jun 21, 2024 · 1 comment

Comments

@salahbm
Copy link

salahbm commented Jun 21, 2024

Hi there,

I am facing some issues here, after clicking the button which opens another component my focus disappears and starts from the index 0 element.

How to solve this?

         <SpottableButton
            className={`${
              page_index == PAGE_HOME ? css.menu_item_active : css.menu_item
            } focusable`}
            onClick={() => {
              showHome(), SpatialNavigation.add({ selector: dataSnRight });
            }}
            id="home_menu_item"
            data-sn-right={dataSnRight} // this works fine when element is visible
          >
            홈
          </SpottableButton>
          <SpottableButton
            className={`${
              page_index == PAGE_SEARCH ? css.menu_item_active : css.menu_item
            } focusable`}
            onClick={showSearch}
            id="search_menu_item"
          >
            검색
          </SpottableButton>

Or in this case after GoBack btn it moves to back 1st focusable element instead of the last focused one
on the web it works fine with Esc or Backspace, but on the LG WebOS Tv button goes back in the route

                      <SpottableLayout
                      className={css.music_list_item_layout_center_selected}
                      onMouseLeave={(e) =>
                        hideTodayItemMenu(e.target.dataset.index)
                      }
                      data-index={index}
                      onKeyDown={(e) => {
                        const keyCodes = [4, 10009, 461];
                        const keys = ['Backspace', 'Escape', 'GoBack'];

                        if (keyCodes.includes(e.key) || keys.includes(e.code)) {
                          e.preventDefault();
                          hideTodayItemMenu(index);
                          SpatialNavigation.focus(
                            '#home_music_list_item_layout_777'
                          );
                        }
                      }}
                    >
                    there are other elements
                   </SpottableLayout>
@salahbm
Copy link
Author

salahbm commented Jun 24, 2024

@luke-chang Hello, Could you please give some advice?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant