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

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

Closed
existenceO opened this issue Apr 30, 2024 · 2 comments
Labels
help wanted Extra attention is needed question Further information is requested

Comments

@existenceO
Copy link

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
tutieshi_640x360_5s (1)
scroll down and scroll up
tutieshi_640x360_5s (2)

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
Copy link
Author

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 xavi160 added help wanted Extra attention is needed question Further information is requested labels May 17, 2024
@xavi160
Copy link
Contributor

xavi160 commented May 17, 2024

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.

@xavi160 xavi160 closed this as completed May 17, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help wanted Extra attention is needed question Further information is requested
Projects
None yet
Development

No branches or pull requests

2 participants