TextField selection is off when using NinePatch

[Arcnor]

When you create a skin for TextField using a NinePatch, the selection and caret positions are off by the left size of the NinePatch. Example:

val textFieldStyle = TextField.TextFieldStyle(
        font, Color.WHITE,
        TextureRegionDrawable(TextureRegion(Texture("caret.png"))),
        TextureRegionDrawable(TextureRegion(Texture("caret.png"))),
        NinePatchDrawable(NinePatch(Texture("textField.png"), 30, 30, 2, 2))
)
skin.add("default", textFieldStyle)
val textField = TextField("This is some text...", skin)
table.add(textField).center().row()

With that code, your textfield will have a 30px left and right "margin". When you click on the text inside the TextField, the caret won't be positioned where you clicked, but 30px to the right. Selections are also obviously affected.

[Arcnor]

Full SSCCE:

public class Example extends ApplicationListener {
    private Stage stage;
    private Table tableRoot = new Table()

    public void create() {
        stage = new Stage(new ScreenViewport());
        Table tableRoot = new Table();

        Skin skin2 = new Skin();
                tableRoot.setFillParent(true);
        stage.addActor(tableRoot);

        Gdx.input.setInputProcessor(stage);

        LabelStyle lblStyle = new Label.LabelStyle(BitmapFont(), Color.WHITE);
        skin2.add("default", lblStyle);

        Pixmap linePixmap = new Pixmap(2, 8, Pixmap.Format.RGBA8888);
        linePixmap.setColor(Color.PINK);
        linePixmap.fill();
        Drawable lineDrawable = new TextureRegionDrawable(new TextureRegion(new Texture(linePixmap)));
        Pixmap backPixmap = new Pixmap(50, 10, Pixmap.Format.RGBA8888);
        backPixmap.setColor(Color.PINK);
        backPixmap.fill();
        Drawable back = new NinePatchDrawable(new NinePatch(new Texture(backPixmap), 15, 15, 5, 5));
        TextFieldStyle txtStyle = new TextField.TextFieldStyle(new BitmapFont(), Color.WHITE, lineDrawable, lineDrawable, back);
        skin2.add("default", txtStyle);
        TextField txt = new TextField("My text", skin2);
        tableRoot.add(txt).row();
    }

    public void render() {
        Gdx.gl.glClearColor(0,0,0,1);
        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

        stage.act(delta);
        stage.draw();
    }
}

Hopefully it will compile right off the bat (I did it with Kotlin and had to manually translate it later :D)

[Arcnor]

The exact same problem happens with hovering Lists

[rafaskb]

I've had problems with ninepatches before for a long time, but then I realized LibGDX's Texture Packer doesn't recognize the padding between the actual image and the patches, making the pad part of the image and therefore causing everything to be out of place. Removing the space between the image and the patches fixed the problem for me. I hope it helps.