Input() text is squished

[reececomo]

Current Behavior

Text is squished into a fixed width area:

Weirdly, placeholder text is unaffected (although it is awfully off-centre for 'center' aligned text):

The amount of squash/stretching appears to be linked to the size of the value field.

And finally when no value is provided (same behaviour, width seems to be ~half the width of a single character):

Expected Behavior

Text should appear normally, and not stretched out.

Context

This is the entire code (honestly):

    this.$_nameField = new Input({
      placeholder: 'Enter text',
      bg,
      align: 'center',
      maxLength: 120,
      textStyle: {
        fontFamily: ['Arial', 'sans-serif'],
        fontWeight: 'bold',
        whiteSpace: 'normal',
      },
      value: 'example',
      padding: 8,
    });
    this.$_nameField.zIndex = 1_000;
    this.$rootView.addChild(this.$_nameField);

Is anyone seeing something similar?

[reececomo]

entire* code probably should include the bg Graphics object too:

    const borderColor = 0xcccccc;
    const backgroundColor = 0xeeeeee;
    const border = 3;
    const radius = 5;
    const width = 200;
    const height = 50;
    const bg = new Graphics()
      .beginFill(borderColor)
      .drawRoundedRect(0, 0, width, height, radius + border)
      .beginFill(backgroundColor)
      .drawRoundedRect(border, border, width - (border * 2), height - (border * 2), radius);

[CyberDex]

Hi, @reececomo

Unfortunately I was not able to reproduce this issue. I have also checked all the usages of the pixi Text instance used here, and there are no places in code where size or scale is changing. You can check it here: https://github.com/pixijs/ui/blob/e77935ade04f994581bf4d13a4f36b55f6d180e9/src/Input.ts#L164

this.inputField is only used to get it's size and never set.

So in order to try to help I need either codepen example that reproduces this issue, or link to a repo (maybe if it is opensource)

[reececomo]

Yeah all good, I figure we (or a plugin) must be doing something somewhere that's causing this.

Thanks for looking, will close this ticket.