Bug with the moveTo() in InlinedCssTextfield

[dracula1001]

Issue with the moveTo() in InlinedCssTextfield:

Hello

I'm doing a school project and in this project I'm using your awesome library, I'm doing a an application which should time how fast you type on your computer, but when I increase the font size, the caret disappear inside the textfield, and when I use moveTo it works but it's very slow that you can see it happen, is there a workaround that, here is a photo

• What it should be like
  

• Actual behaviour after font increase
  

My code

I use moveTo(), then I request follow caret

Reproducible Demo

Use the following template to get started.

import javafx.geometry.Insets;
import javafx.scene.control.Label;
import javafx.scene.input.KeyCode;
import javafx.scene.input.KeyEvent;
import javafx.scene.layout.ColumnConstraints;
import javafx.scene.layout.GridPane;
import javafx.scene.text.TextAlignment;
import org.fxmisc.richtext.InlineCssTextField;

import java.util.ArrayDeque;
import java.util.Deque;
public class TextRun extends GridPane {
  Deque<String> history = new ArrayDeque<>();

  Label label;
  String str = "this is it thank you for trying this out this is a very long text and this a difficult sequential word";
  InlineCssTextField css = new InlineCssTextField();

  public TextRun() {
    label = new Label(str);
    label.setPadding(new Insets(5));
    getChildren().addAll(css);
    getColumnConstraints().add(new ColumnConstraints(200));
    add(label, 1, 0);

    cssStyling();
    mistakeListener();
  }

  private void mistakeListener() {
    css.textProperty().addListener((observable, oldValue, newValue) -> {
      if (css.getText().length() > 0)
        if (str.charAt(css.getText().length() - 1) == css.getText().charAt(css.getText().length() - 1))
          css.setStyle(css.getText().length() - 1, css.getText().length(),
              "-fx-fill: green");
        else
          css.setStyle(css.getText().length() - 1, css.getText().length(),
              "-fx-fill: red");
    });
  }

  private void cssStyling() {
    css.setOnKeyPressed(this::keyPressed);
    css.setAlignment(TextAlignment.RIGHT);
    css.setMaxHeight(25);
    css.setMinWidth(210);
    css.setStyle(
        "-fx-faint-focus-color: transparent;" +
            "-fx-focus-color: transparent;" +
            "-fx-background-insets: 0;" +
            "-fx-padding: 4;");
  }

  private void keyPressed(KeyEvent event) {
    if (event.getCode() == KeyCode.BACK_SPACE) {
      historyRestore();
      return;
    }
    history.add(label.getText());
    label.setText(label.getText().substring(1));
  }

  private void historyRestore() {
    if (history.size() > 0)
      label.setText(history.removeLast());
  }
}

And here is the driver class

public class Demo extends Application {

  public static void main(String[] args) {
    launch(args);
  }
  static TextRun text;

  @Override
  public void start(Stage stage) {

    HBox hBox = new HBox();
    hBox.setStyle("-fx-background-color: white");

    text = new TextRun();
    hBox.getChildren().add(text);
    Scene scene = new Scene(hBox, 410, 400);
    stage.setScene(scene);
    stage.setTitle("Tooltip Demo");
    stage.show();
  }

}

Environment info:

• RichTextFX Version: <0.10.6>
• Operating System: <macOS>
• Java version: <13>

---

and here is the code after modification to increase the font

import javafx.geometry.Insets;
import javafx.scene.control.Label;
import javafx.scene.input.KeyCode;
import javafx.scene.input.KeyEvent;
import javafx.scene.layout.ColumnConstraints;
import javafx.scene.layout.GridPane;
import javafx.scene.text.TextAlignment;
import org.fxmisc.richtext.InlineCssTextField;

import java.util.ArrayDeque;
import java.util.Deque;
public class TextRun extends GridPane {
  Deque<String> history = new ArrayDeque<>();

  Label label;
  String str = "this is it thank you for trying this out this is a very long text and this a difficult sequential word";
  InlineCssTextField css = new InlineCssTextField();

  public TextRun() {
    label = new Label(str);
    label.setPadding(new Insets(5));
    label.setStyle("-fx-font-size: 30");
    getChildren().addAll(css);
    getColumnConstraints().add(new ColumnConstraints(200));
    add(label, 1, 0);

    cssStyling();
    mistakeListener();
  }

  private void mistakeListener() {
    css.textProperty().addListener((observable, oldValue, newValue) -> {
      if (css.getText().length() > 0)
        if (str.charAt(css.getText().length() - 1) == css.getText().charAt(css.getText().length() - 1))
          css.setStyle(css.getText().length() - 1, css.getText().length(),
              "-fx-fill: green");
        else
          css.setStyle(css.getText().length() - 1, css.getText().length(),
              "-fx-fill: red");
    });
  }

  private void cssStyling() {
    css.setOnKeyPressed(this::keyPressed);
    css.setAlignment(TextAlignment.RIGHT);
    css.setMinWidth(210);
    css.setStyle(
        "-fx-faint-focus-color: transparent;" +
            "-fx-focus-color: transparent;" +
            "-fx-background-insets: 0;" +
            "-fx-padding: 4;" +
        "-fx-font-size: 30");
  }

  private void keyPressed(KeyEvent event) {
    if (event.getCode() == KeyCode.BACK_SPACE) {
      historyRestore();
      return;
    }
    history.add(label.getText());
    label.setText(label.getText().substring(1));
  }

  private void historyRestore() {
    if (history.size() > 0)
      label.setText(history.removeLast());
  }
}

Thanks

You really made a very nice thing here guys, just how responsive you are makes you really awesome ppl.

[Jugen]

Thank you for reporting, and especially for the reproducible demo (awesome) !
You've found a bug that's somehow related to the font-size affecting the correct behavior of follow caret.
I've found in your demo that with a font-size of 12 it still behaves correctly, but then suddenly misbehaves at 13 and up.

You can try the following changes to your demo as a hacky workaround, until I find and fix the problem .....

    private void mistakeListener()
    {
        javafx.scene.robot.Robot robo = new Robot();

        css.textProperty().addListener( ( observable, oldValue, newValue ) ->
        {
            int length = css.getLength(); 
            int len0 = length - 1;
            
            if ( length > 0 )
            {
                if ( str.charAt( len0 ) == css.getText().charAt( len0 ) )
                {
                    css.setStyle( len0, length, "-fx-fill: green" );
                }
                else css.setStyle( len0, length, "-fx-fill: red" );
            }

            if ( css.getCaretPosition() == length )
            {
                robo.keyPress( KeyCode.END );
                robo.keyRelease( KeyCode.END );
            }
        } );
    }

and

    private void keyPressed( KeyEvent event )
    {
        if ( event.getCode() == KeyCode.BACK_SPACE )
        {
            historyRestore();
            return;
        }
        else if ( event.getCode() == KeyCode.END )
        {
            return;
        }

        history.add( label.getText() );
        label.setText( label.getText().substring( 1 ) );
    }

[dracula1001]

OMG Thank you so much, this was it, I tried that but macOS is rejected it because of the permissions thingies, tried on windows and it works, again thank you so much