Add throttle: 250 and shouldFocusDOMNode: true in init causing scroll behavior weird

[existenceO]

Describe the bug Hi! I begin the library with your example. Then I try to customize it. The config of the init:

init({
  debug: false,
  visualDebug: false,
  shouldFocusDOMNode: true,
  // shouldUseNativeEvents: true,
  throttle: 250
});

also I call the focusSelf onMouseEnter event in the asset

const Asset: React.FC<AssetProps> = (props) => {
  const { title, color, onEnterPress, onFocus } = props;
  const { ref, focused, focusSelf} = useFocusable({
    onEnterPress,
    onFocus,
    extraProps: {
      title,
      color
    }
  })

  return (
    <div className={styles.AssetWrapper} ref={ref} onClick={() => console.log('click')} onMouseEnter={focusSelf}>
      <AssetBox color={color || ''} focused={focused}/>
      <div className={styles.AssetTitle}>{title}</div>
    </div>
  )
};

Currently I try it with chrome browser. I press arrowDown to the first content row, then I click the second asset of the first row, and long press arrowDown to the end and long press arrowUp to the appbar, the scroll behavior of the content rows is weird, the first content row can't show in view. If I remove the throttle: 250, then it is normal.

To Reproduce Steps to reproduce the behavior:

1. Go to 'http://localhost:5173/'
2. press arrowDown to the first content row;
3. long press arrowDown to the end, long press arrowUp to the top
4. the first content row can't completely show in view

Expected behavior

Screenshots https://github.com/NoriginMedia/Norigin-Spatial-Navigation/assets/50443390/5f4b2555-f25e-4a06-b8c3-7e29fe97c8f2 click the item scroll down and scroll up

Additional context Here's the demo, I upload it to the codesandbox, but it seems unable to run online, need to download and run in local I guess. https://codesandbox.io/p/devbox/9vwlmz?file=%2Fsrc%2Fmain.tsx%3A17%2C5

Could help to review the issue? Thank you!

[existenceO]

I add tabIndex={-1} to the asset, scroll behavior is normal with this config

init({
  debug: false,
  visualDebug: false,
  shouldFocusDOMNode: true,
  throttle: 250
});

But this config still has the issue above.

init({
  debug: false,
  visualDebug: false,
  shouldUseNativeEvents: true,
  throttle: 250
});

[xavi160]

Hello, I think the issue here is that you're not throttling the focusSelf so it's interfering with the rest of key presses.

When you use the throttle option, all key presses are throttled but that's not the case for manual calls to setFocus (like the one it's done in focusSelf).

You should handle that manually on your app, depending on the desired behavior.