P: 'Edit Text' field 'enter key' behavior being overridden (JavaScript, Windows)

[Zollie135]

The enter key in the simplified test code below is not allowing users to create a new line within the edit text field (as expected). Instead, the modal is being submitted. The code works properly on OSX but not Windows.

I've mostly tried eventListener related solutions. So enterKey, onEnterKey, onChange, change, etc - then assigning them to different elements in the interface. Haven't been able to get those event listeners to fire, but if I could, would try event.preventDefault() or event.stopPropogation() as well. No luck yet.

var modal = new Window("dialog");
modal = addFilenamesPanel(modal)
/*
Commenting 'addSubmissionButtonsGroup' fixes the issue.
So maybe there is problematic a event listener or 
propogation occurring within the submission buttons.
*/
modal = addSubmissionButtonsGroup(modal)
modal.show();
function addFilenamesPanel(modal) {
 
    modal.filenamesPanel = modal.add(
        "panel",undefined,"Filenames"
    );
    var panel = modal.filenamesPanel;
    /*
    'enterKeySignalsOnChange' fixes issue
    on OSX but not Windows 10.
    */
    panel.filenamesText = panel.add(
        "EditText",undefined,"",{
 
            multiline: true,
            enterKeySignalsOnChange: true
        }
    )
    panel.filenamesText.minimumSize = [400,200];
    return modal
}
function addSubmissionButtonsGroup(modal) {
 
    modal.submissionButtons = modal.add(
        "group", undefined, "submit"
    );
    modal.submissionButtons.cancel = addButton(
        modal.submissionButtons,"cancel",false
    );
    modal.submissionButtons.ok = addButton(
        modal.submissionButtons,"ok",true
    );
    return modal
    function addButton(group,buttonName,response) {
 
        group.add(
            "button", undefined, buttonName,
            {name: buttonName}
        )
        group.addEventListener( "click", function() {
 
            return response
        });
        return group
    }
}

visualExplanation-a566bafa-19da-4262-8437-100133aa6ab5-1937277580.png

[J453]

Thanks. I've asked engineering to take a look.

[Lumigraphics]

Buttons already have an event listener, you don't add one. Use the built-in onClick() function.

[Zollie135]

Might be narrowing in on the problem. The enter key unexpectedly fires a click event when no click occurs (but the enter button is pressed). Here's the modal with only the ok button in it.

var modal = new Window("dialog");
modal = addSubmissionButtonsGroup(modal)
modal.show();

function addSubmissionButtonsGroup(modal) {
 
    modal.submissionButtons = modal.add(
        "group", undefined, "submit"
    );
    modal.submissionButtons.ok = addButton(
        modal.submissionButtons,"ok",true
    );
    return modal

    function addButton(group,buttonName,response) {
 
        group.add(
            "button", undefined, buttonName,
            {name: buttonName, enterKeySignalsOnChange: false}
        )
        group.addEventListener( "click", function(event) {
 
            // this will print "click" if you press the enter key
            $.writeln("click")
            return response
        });
        return group
    }
}

It's also odd that the modal would close when no close() method has been called.

[Lumigraphics]

Remove the addEventListener, that's just gumming things up. Use the onClick callback instead. And you can set the Active property to false so it doesn't get keyboard focus.

[Lumigraphics]

Try this sample:

testWindow = new Window ('palette', 'test', undefined, {closeButton:true});
testWindow.orientation = 'column';
testWindow.alignChildren = ['fill', 'fill'];
testPanel = testWindow.add('panel', undefined, 'Test');
testPanel.orientation = 'column';
testPanel.alignChildren = ['fill', 'top'];
testPanel.margins = [10, 10, 10, 10];
testPanel.etxt = testPanel.add('edittext', undefined, 'Works ok here.', {multiline:true, wantReturn:true});
testPanel.etxt.preferredSize = [200, 100];
testPanel.btn = testPanel.add('button', undefined, 'Click Me');

testPanel.btn. function(){
    testPanel.etxt.text = 'No problem';
    }
testWindow.layout.layout(true);
testWindow.show();

[Lumigraphics]

OK....... hey admins, bug in the forum software. it should be testPanel.btn. function()

[Lumigraphics]

can't write "onClick"

[Lumigraphics]

GRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRR

[Zollie135]

understanding you now. testing on my end too

[Zollie135]

yeah the preformatted text helps some, but this site's editor seems to add excess line breaks after any opening brackets { too

[Zollie135]

The script you posted immediately closes after running on Windows. It seems the ON CLICK function fires before anything else, since when I add a prompt to it, that prompt appears before the window does. That isn't happening with the (problematic) eventListener that was previously in use.

[Zollie135]

here it is being run

<iframe src="https://www.youtube.com/embed/oui6CwK9cjc" style="max-width: 100%; max-height: 100%;" width="640px"></iframe>

[Lumigraphics]

I can run it in Bridge 2021 or ESTK on Win 10 and the script window stays open until you click the close box. If you use a different target from ESTK, you have to switch to that app as it will return to ESTK.

[Zollie135]

You're on to something in referencing targeting. The following code (using the recommended ON CLICK method) works when I target ESTK but not when I target Photoshop (which I unfortunately was hoping to do).

var modal = new Window("dialog");
var response;
modal.group = modal.add(
    "group", undefined, "submit"
);
modal.group.btn = modal.group.add(
    "button",undefined,"Ok",{name:"ok"}
)
modal.group.etxt = modal.group.add(
 'edittext', undefined, "Try pressing 'enter.'",
 {multiline:true, wantReturn:true, enterKeySignalsOnChange: true}
);
modal.group.etxt.minimumSize = [400,200];
modal.group.btn. function() {
 
    response = "Click registered.";
    modal.close();
}
modal.show();
$.writeln(response)

[Zollie135]

to save you the trouble

<iframe src="https://www.youtube.com/embed/9JVGW0pT3v0" style="max-width: 100%; max-height: 100%;" width="640px"></iframe>