Option to disable the autoscroll and click scrolldown event

[SorrisoPraFoto]

I'm making a simulated unix terminal with this UI in ReactJS but the component was setted in my Landing Page, soo the component auto scrolls down when the page loads and click in the terminal sends the user to the final line. I think that is a simple configuration but I tried to find in the .js file inside the modules folder, the code seems to be a obfuscated javascript, so it's hard to understand.

Otherwise, I went to the documentation page of termynal at github and found out the setting:

noInit | boolean | false | Don't initialise the animation on load. This means you can call Termynal.init() yourself whenever and however you want.

, thats some like my objective, just need to disable the scroll down to the final line when triggered the click feature too.

If you know some settings that I need to make to solve this problem, sorry but I didn't found out this information in the repo or others wiki's for the React terminal ui. But if doesn't have a especific setting for this, my suggestion is to make, soo the project can be more configurable.

Thnks.

[github-actions[bot]]

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

[jonmbake]

This is where the auto-scrolling happens in the code: https://github.com/jonmbake/react-terminal-ui/blob/master/src/index.tsx#L45. The original idea is that the prompt should be visible after adding a new line. I am surprised it scrolls down on click/focus. One possible solution is to not pass an onInput prop, which will prevent focus (however it will longer accept input). If that doesn't work, we can look into the issue w/ scrolling on click.

[SorrisoPraFoto]

I didn't found this index.tsx at module folder, but I guess it's better to not modify these archives for now.

I wan't to remove the scrolldown feature when the page loads, click and type something without removing the onInput prop because thats essential for my simulated Unix system, is there other way?

[jonmbake]

Just to confirm: The behavior that you want is for it to not scroll to the input cursor when the page first loads, but scroll to the input cursor when clicking (focusing) on the terminal. Is this correct? Or were you thinking it should scroll into view when the user enters input? It looks like that is a more typical terminal behavior.

There is currently not a configuration option to control this scrolling behavior. We can add one. Just want to be sure it meets your and other's needs.

[SorrisoPraFoto]

That's close, I wan't a option to disable the scroll to the input cursor when the page first loads and disable cursor when clicking on the terminal.

I got it that the scroll down behavior happens when the user clicks on the terminal, but the scrolls doesn't match to the axis y of the current input, soo I wish to disable that feature too and implement this by myself with my CSS, I guess this feature is more comfortable for personalized terminals.

Soo the suggestion is make a option for: disable the scroll down when the page loads and disable the scroll down when the user types or click something.

If you can, of course.

[jonmbake]

scrolls doesn't match to the axis y of the current input

Do you have a screenshot to show what you mean by this?

disable the scroll down when the user types or click something.

The terminal currently doesn't scroll down when clicking or typing-- only when a new line gets added. I am unsure what you mean by this. For example, I am currently typing input into the terminal and it stays scrolled to the top:

Skipping scroll down on load is relatively simple change. We could do something like:

diff --git a/src/index.tsx b/src/index.tsx
index 82fc1da..fad9051 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -41,8 +41,12 @@ const Terminal = ({name, prompt, colorMode, lineData, onInput, startingInputValu
   }, [startingInputValue]);

   // An effect that handles scrolling into view the last line of terminal input or output
+  const performScrolldown = useRef(false);
   useEffect(() => {
-    setTimeout(() => lastLineRef?.current?.scrollIntoView({ behavior: "smooth" }), 500);
+    if (performScrolldown.current) { // skip scrolldown when the component first loads
+      setTimeout(() => lastLineRef?.current?.scrollIntoView({ behavior: "smooth" }), 500);
+    }
+    performScrolldown.current = true;
   }, [lineData.length]);

   // We use a hidden input to capture terminal input; make sure the hidden input is focused when clicking anywhere on the terminal

(To build index.js with index.tsx changes, just run npm run build)

[jonmbake]

Hi @SorrisoPraFoto . An fix was pushed to disable autoscroll when the terminal first loads. It's available in 0.1.12. Can you give it a try?

Feel free to open a separate issue for the click scrolldown event issue. Also, if you could provide screenshots when you open the issue so I can better understand, that would be great.

[SorrisoPraFoto]

Hi Jon, thanks for your commit developing my suggestion.

I will open other issue for the click scrolldown event with a video.

About the new version 0.1.12, it works fine, thanks.