search

jonmbake / react-terminal-ui

A terminal react component with support for light and dark modes.
https://jonmbake.github.io/react-terminal-ui/demo/
MIT License
214 stars 33 forks source link

Scrolling automatically #51

Closed tomasmalio closed 4 months ago

tomasmalio commented 4 months ago

Describe the bug I'm creating a platform with the terminal, and I'd include the component at the bottom of the website when we enter the first time the platform scrolls to the position of the terminal. I tried to fixed with the overflow-anchor: none but didn't work.

To Reproduce Steps to reproduce the behavior:

  1. Create a website with different sections that needs to scroll to the position of you're react-terminal-ui
  2. Load the website
  3. The website is going to scroll automatically to the terminal.

Expected behavior I don't want this to automatically scroll to the terminal. How can I configure it to avoid this?

github-actions[bot] commented 4 months ago

Thank you for taking the time to submit an Issue! You should get a response to this issue within one to two days.

jonmbake commented 4 months ago

Hey @tomasmalio . Right now the terminal is setup so the terminal cursor scrolls into view (so the user always sees the cursor). We may be able to change it so the scroll into view is localized to the terminal container. Feel free to submit a PR for the change.

jonmbake commented 4 months ago

@tomasmalio This is available in v1.3.0.

tomasmalio commented 4 months ago

HI @jonmbake I'm checking if everything works because right now in my app doesn't work

jonmbake commented 4 months ago

@tomasmalio What browser are you using? I'm not seeing the behavior you described when testing in Firefox 125.0.3 on MacOs. Created a 1000px height div and a terminal below (off screen). When I load the page, it does not scroll to the terminal:

Screenshot 2024-05-11 at 3 17 19 PM

Also, I should have more closely reviewed the code change... The scroll into view only happens on key press so the code change you made is likely unnecessary. I suspect maybe the browser you are testing in auto-scrolls to focused input on page load; the issue is likely with the autoFocus={ onInput != null } bit.

tomasmalio commented 4 months ago

Hi @jonmbake, I'm testing in MacOS with Chrome 124.0.6367.119.

I tried to do it with the autoFocus, but it also goes to the terminal. I'm trying to understand why.

tomasmalio commented 4 months ago

@jonmbake I have tried multiple ways, but I have not succeeded. Keep scrolling. I have developed a platform with react js, and when it initializes, it directs me to where the terminal is.

jonmbake commented 4 months ago

@tomasmalio Is your platform/website publicly accessible? Can you email me the URL? I would like to take a look at the behavior. I'm not able to reproduce it locally.

Also, did you try disabling autofocus from the terminal code? Did it have an effect?

tomasmalio commented 4 months ago

Hi @jonmbake, I've shared with you by mail the URL in which I uploaded the website.