Textbox2 unexpectedly reset its text in the center in PsychJS (fine in PsychoPy)

Online experiments
1

OS (e.g. Win10): Mac Sonoma
PsychoPy version (e.g. 1.84.x): 2023.2.3
Standard Standalone? (y/n) Yes
What are you trying to achieve?:

I want to make the textbox change to red when the mouse is over it.

What did you try to make it work?:

in Each Frame:

  • note Andesite_l is a textbox, cat_mouse_l is a mouse.
if (Andesite_l.contains(cat_mouse_l)) {
    Andesite_l.color = "red";
    Andesite_l.borderColor = "red";
} else {
    Andesite_l.color = "black";
    Andesite_l.borderColor = "black";
}

What specifically went wrong when you tried that?:
The textbox border and text changed the color, but the text itself was replaced to the center, which is unexpected.

Screenshot 2023-11-24 at 11.23.22 AM
Screenshot 2023-11-24 at 11.23.22 AM1494×858 65.8 KB

If I delete the above code in each frame, the JS experiment went perfect fine. I have tested locally in PsychoPy, which is not an issue. The textbox2 in JS has this problem. I’m wondering the textbox2.setPos() only set the position for the box not the text. Any idea how to fix the problem? Thanks in advance!

2

Are you using code to set the textbox position? I’ve just tested in the same version and I’m finding that the cursor is starting at the top boundary of the textbox rather then the centre of the screen

https://run.pavlovia.org/test-suite/text-box/

3

I used builder to set textbox position. The text is consistent with the position that I set, but it was placed to the center when I inserted the above code in EACH FRAME to let the textbox’ border and text changed color when the mouser is over. or maybe I should not write it in Each Frame? Could you please test it on your demo

EACH FRAME

if (textbox.contains(mouse)) {
    textbox.color = "red";
    textbox.borderColor = "red";
} else {
    textbox.color = "black";
    textbox.borderColor = "black";
}
4

That is very strange. I reduced the overhead (I think) by using the following code:

if textbox.contains(mouse):
    if textbox.color != "red":
        textbox.color = "red"
        textbox.borderColor = "red"
else:
    if textbox.color == "red":
        textbox.color = "black"
        textbox.borderColor = "black"

With my version of your cod the text flicks to the centre for one frame while the text colour is being changed. It looks like you can’t type on the same frame as a colour change. In your code the colour is being set every frame.

5

With slightly more complex code I’ve confirmed that .color and .borderColor both have this effect.

6

Thanks for suggesting this workaround :star_struck: very helpful. But that one frame text flick is still noticeable, I might use text + rect this time, hope PsychoPy team can fix it.