'undefined is not a function' in custom textEditor

tribbull · January 27, 2015, 2:31pm

I’m using this example:

NorthwoodsSoftware/GoJS/blob/master/samples/customTextEditingTool.html

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Text Editing Examples</title>
<meta name="description" content="Custom text editing using different HTML elements." />
<!-- Copyright 1998-2018 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="../release/go.js"></script>
<!-- custom text editors -->
<script src="../extensions/TextEditorSelectBox.js"></script>
<script src="../extensions/TextEditorRadioButtons.js"></script>

<script src="../assets/js/goSamples.js"></script>  <!-- this is only for the GoJS Samples framework -->
<script id="code">
function init() {
  if (window.goSamples) goSamples();  // init for these samples -- you don't need to call this
  var $ = go.GraphObject.make;

  myDiagram = $(go.Diagram, "myDiagramDiv",  // must identify the DIV

This file has been truncated. show original

I think I minimally pulled the “customText” part into my code correctly.
As soon as I click on the text block , however, I keep getting ‘TypeError: undefined is not a function’ in Chrome.

It happens right after calling "doActivate()" on customText.

My html div does appear on screen in the right place

Stack trace:

lh.doActivate (go-debug.js:12156) Ze.doMouseUp (go-debug.js:12415) u.doMouseUp (go-debug.js:13966) a.Pp (go-debug.js:13709)

I did an unminify.com pass on go-debug.js to see if it would help figure out what go is trying to do:

If I look in Chrome, “c” seems to be my HTML Div element I put on the page.
And it is true, it does NOT have “select()” method.

                c.style.position = "absolute";
                c.style.zIndex = 100;
                c.className = "start";
                c.textEditingTool = this;
                c.qK = k;
                if (d && void 0 !== c.onActivate) c.onActivate();
                this.nh = c;
                c.focus();
                <font color="#ff0000"><b>c.select() <-- dies here. Why is it calling select()?! </b></font>
            }
        }
    }

Any ideas?

walter · January 27, 2015, 2:58pm

It’s assuming that the element is an HTMLInputElement, calling this method: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement.select

Apparently for 1.5 we have already improved the code to be:
if (typeof input.focus === ‘function’) input.focus();
if (typeof input.select === ‘function’) input.select();

If you have specified the text editor to be something other than an HTMLInputElement, I suppose you could implement focus() and select() methods on your element.

Sorry for the confusion.

tribbull · January 27, 2015, 3:05pm

Thanks

I wondered about that, but how is the sample working then?

oh-- unless it has the latest code?
I’ll grab the latest also.

I’m using the same html chunk as the example, just to see if I could get anything working.

That has <<span =“pl-ent” style=“line-height: 16.7999992370605px; -sizing: border-; color: rgb99, 163, 92; font-family: Consolas, ‘Liberation Mono’, Menlo, Courier, monospace; white-space: pre; : rgb255, 255, 255;”>div <span =“pl-e” style=“line-height: 16.7999992370605px; -sizing: border-; color: rgb121, 93, 163; font-family: Consolas, ‘Liberation Mono’, Menlo, Courier, monospace; white-space: pre; : rgb255, 255, 255;”>id=<span =“pl-s1” style=“line-height: 16.7999992370605px; -sizing: border-; color: rgb223, 80, 0; font-family: Consolas, ‘Liberation Mono’, Menlo, Courier, monospace; white-space: pre; : rgb255, 255, 255;”><span =“pl-pds” style="-sizing: border-;">"customTextEditor…

tribbull · January 27, 2015, 3:09pm

I put in the fake select() method, seems to fix it.

walter · January 27, 2015, 3:16pm

And I have back-ported the fixes into the 1.4.* stream, so in the future someone using a non-HTMLInputElement just won’t get their text selected. Unless they define the select method themselves, as you now have.