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.

Sign up for GitHub

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

Jump to bottom

Terminal never gives up focus #359

Closed
nefelin opened this issue Dec 8, 2017 · 14 comments
Closed

Terminal never gives up focus #359

nefelin opened this issue Dec 8, 2017 · 14 comments

Comments

@nefelin
Copy link

nefelin commented Dec 8, 2017 •
edited
Loading

I've tried to switch focus to another text box using both terminal commands and key event handlers registered on the window, I would expect the focus to switch completely to other text box

jquery terminal always retains focus. sometimes theres a period of shared focus where a few characters entered go in both the terminal and the other text box

Maybe there's a way to do this but I've tried messing with enabled and other settings. Have read similar problems but nothing quite the same. Is there a simple fix to this? just wanted to ask before I go digging around in the code.

have tried in chrome and firefox on macos and ubuntu

edit: also just checked and even on the official demo page with the quake-like terminal, hidden terminal still grabs all key entries
@jcubic
Copy link
Owner

jcubic commented Dec 8, 2017 •
edited
Loading

This one works in command:

setTimeout(() => {
    this.disable();
    $('input')[0].focus();
}, 100);

Don't know why it don't work without timeout and don't know why focus(false) don't work. It's calling disable, but right now focus it's for switching terminals if you have more then one terminal.

I need to investigate why there is need for setTimeout, it would be nice if you need to use it, probably the code that make textarea in sync (fix_textarea function) it responsible for this and it refocus after you enter the command.

@nefelin
Copy link
Author

nefelin commented Dec 8, 2017 •
edited
Loading

It doesn't work for me, even with timeout. That only results in strange shared focus. Even with longer timeout...

EDIT: Oh my mistake, I had messed with onBlur property. It works now with timeout...

jcubic added a commit that referenced this issue Dec 8, 2017
@jcubic
Fix focus on single term + allow to call focus/disable from command #359
8ece277
@jcubic
Copy link
Owner

jcubic commented Dec 8, 2017

There was two bugs one that you can't call focus(false) if you have one terminal and the fix for second was to check if cmd plugin was enabled before refocus textarea and set cursor position.

Can you test devel branch?

@nefelin
Copy link
Author

nefelin commented Dec 8, 2017

Great! yes, focus(false) now works without timeout! (on devel branch)

@nefelin
Copy link
Author

nefelin commented Dec 8, 2017

While you're here I would love to ask you if there's any elegant way to do something else I've been trying to do, but I'm new to git... is it cool to have unrelated discussion on this thread? :)

@jcubic
Copy link
Owner

jcubic commented Dec 8, 2017

Sure

@jcubic
Copy link
Owner

jcubic commented Dec 8, 2017

or maybe better to create another issue with your question so if someone will search he will find it by title.

@nefelin
Copy link
Author

nefelin commented Dec 8, 2017

ok I'll do that

@jcubic
Copy link
Owner

jcubic commented Dec 19, 2017

the fix is in version 1.11.0

@jcubic jcubic closed this as completed Dec 19, 2017
@ahmed-shariff
Copy link

I am also running into the same problem. If you guys don't mind, can you explain how this can be fixed?

using the cdn version 1.11.4, copied form the README

@jcubic
Copy link
Owner

jcubic commented Feb 24, 2018

@ahmed-shariff what exactly is the issue? And what steps do I need to do to recreate the issue?

@ahmed-shariff
Copy link

I am using ace-editor and the terminal in the same page. The php script is as follows:

<html>
    <head>
	<title>Editor</title>
	<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">

	<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>

	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

	<!-- jQuery library -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

	<!-- Popper JS -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

	<!-- Latest compiled JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

	<!-- jQuerry.terminal -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.terminal/1.11.4/js/jquery.terminal.min.js"></script>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.terminal/1.11.4/css/jquery.terminal.min.css" rel="stylesheet"/>

	<!-- ace editor -->
	<script src="ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>

	<script>hljs.initHighlightingOnLoad();</script>
	<style type="text/css" media="screen">
	</style>
	
	<script>
	 $( document ).ready(function() {

	     var editor = ace.edit("editor");
	     editor.setTheme("ace/theme/ambiance");
	     editor.session.setMode("ace/mode/javascript");

	     var available_height = $("body").height() - $("nav").height() - 3;
	     $("#editor").height(available_height * 0.7);//$("body").height() - $("nav").height() - 3);
	     $("#terminal").height(available_height * 0.3);

	     $('#terminal').terminal(function(command, term) {
		 term.pause();
		 $.post('echo_command.php', {command: command}).then(function(response) {
		     term.echo(response).resume();
		 });
	     }, {
		 greetings: 'Dummy Terminal',
		 onBlur: function() {
		     return false;
		 }
	     });
	     
	 });
	 
	</script>
    </head>

    <body>
	<div class="container-fluid" style="width:100%">
	    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
		<div class="navbar-header">
		    <div class="navbar-brand">Online Portal</div>
		</div>
		<div class="input-group-sm form-inline">
		    <input type="text" class="form-control" placeholder="File Name" id="filename">
		    <div class="input-group-append">
			<button class="btn btn-outline-secondary" type="button" id="save">Save</button>
		    </div>
		</div>
		<ul class="navbar-nav">
		    <li class="nav-item active">
			<a class="nav-link" href="#">Active</a>
		    </li>
		</ul>
	    </nav>
	
	    <div class="row">
		<div class="col-xs-12 col-sm-12 col-md-12">
		    <div id="editor">
		    function foo(items) {
			var x = "All this is syntax highlighted";
			return x;
			}
		    </div>
		</div>
	    </div>
	    <div class="row">
		<div class="col-xs-12 col-sm-12 col-md-12">
		    <div id="terminal"></div>
		</div>
	    </div>
	</div>
    </body>
</html>

The echo_command.php just echos back what was sent to it.

The terminal works nicely. But when I am trying to use the input on the top of the page, or the ace-editor, whatever I type is also grabbed by the terminal. Also the when I hit enter from within the editor, the terminal takes that and the editor does not.

@jcubic
Copy link
Owner

jcubic commented Feb 24, 2018 •
edited
Loading

Oh, it's because you're using:

onBlur: function() {
    return false;
}

TL;DR remove it

this make terminal don't give up focus, this was fix for full screen terminal when it was added to body. When output of the terminal is smaller then the height you could click below terminal and you loose focus . I've added this to examples so it work for Full screen terminal. But it turn out that this can be done using css min-height: 100vh; which was added to terminal css so even for terminal on body this is not needed.

I need to remove that function from examples.

@ahmed-shariff
Copy link

That solved the problem.
Thank you for the quick reply. 💃

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@jcubic @ahmed-shariff @nefelin