Texteditor fires `focus` event several time and fires not properly

GoJS
1

Hello,
I took an example by using Texteditor from your demo HTMLInfo Text Editor

I found focus event fires several times and fires not properly. focus event fires when Texteditor focused and I click somewhere else

Here is a demo - Plunker - gojs focus
here is a video - https://drive.google.com/file/d/0BywlVSJDF9VYQXZlekgwTmxIUXM/view

Is it bug or special behaviour?
How to avoid useless firing?

2

We do not allow users to focus elsewhere on the page until the TextEditingTool is finished.

I’m not sure why it’s focusing multiple times, we’ll investigate.

3

I see what you mean. For one of them, in the event listener:

  textarea.addEventListener('blur', function(e) {

Change the line:

    if (!tool || tool.currentTextEditor === null) return;

to:

    if (!tool || tool.currentTextEditor === null || tool.state === go.TextEditingTool.StateNone) return;

This will stop 1 of 2 errant focus events.

The other is a bug internally, that will be fixed when we release 1.8, within a week or two.

4

I found another strange thing.
When I focus node and then try to choose something else or just click on any place focus listener fires. Why focus? I expect blur

this is video https://drive.google.com/file/d/0BywlVSJDF9VYcHotQ05OS3BqbVU/view?usp=sharing

5

Which version are you using? Have you tried 1.8.0?

Text validation may cause the editor (textarea) to regain focus.

6

I’m using 1.8.1

Look at console. After blur focus fires again.
How to avoid regain focus? Or how to understand why exactly focus fires again?

7

Sorry for the delay, we will investigate this soon.

8

If you change this:

  TextEditor.hide = function(diagram, tool) {
    diagram.div.removeChild(textarea);
    TextEditor.tool = null;  // forget reference to TextEditingTool
  }

to:

  TextEditor.hide = function(diagram, tool) {
    TextEditor.tool = null;  // forget reference to TextEditingTool
    diagram.div.removeChild(textarea);
  }

Does it work as you’d expect?

9

Thanks.
It works fine when I click on a diagram, But if I click outside diagram it repeats again. blur than focus. Also, Texteditor doesn’t hide when I click outside diagram.
Is it proper behavior? What should I do if I want to hide TextEditor by clicking outside a diagram?

10

That’s the expected behavior. You can modify the custom text editor code more to get the behavior you want by making sure that the tool is stopped if the user clicks outside the Diagram.

You could write something like this to replace the old blur:

  // stop the tool on blur
  textarea.addEventListener('blur', function(e) {
    // debugger
    console.log('blur');
    var tool = TextEditor.tool;
    if (!tool || tool.currentTextEditor === null) return;

    tool.stopTool();
  }, false);
11

Thanks @simon, It works!

Why is it expected? What is the logic you put here?

12

Normally, clicking outside the diagram does not stop in-place text editing because GoJS does not modify the behavior of any element outside the diagram.

But you can, if you want to.

13

Thanks @walter