Input() text is squished

[Reece Como]

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?

[Reece Como]

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);

[Dmytro Soldatov]

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:

ui/src/Input.ts

Line 164 in e77935a

 this.inputField = new Text('', textStyle); 

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)

[Reece Como]

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.