luke-chang / js-spatial-navigation

A javascript-based implementation of Spatial Navigation.
Mozilla Public License 2.0
370 stars 117 forks source link

Element loosing focus after onClick #68

Open salahbm opened 2 weeks ago

salahbm commented 2 weeks ago

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 commented 1 week ago

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