Multi input not work correctly on mobile

[hungluongkong]

Expected Behavior

App can handle multi input fields, open keyboard on one press and hide on one press.

Current Behavior

Only one input can work. If create more than 1 input fields, keyboard will not open, HTML input have active when tap on it and typing not work correctly.

Possible Solution

I'm create each HTML input for every input component:

private _keyboard: HTMLInputElement;

// constructor
 this.on('pointertap', () => {
      this.activation = true;
      utils.isMobile.any && this.handleActivation(); // handleActivation always call before this function called.
});

if (utils.isMobile.any) {
            window.addEventListener('touchstart', () => this.handleActivation());
            this._keyboard = document.createElement('input');

            document.body.appendChild(this._keyboard);
            this._keyboard.setAttribute('id', 'v-keyboard' + Utils.shortUuidv4());

            this._keyboard.style.opacity = '0';
            this._keyboard.style.position = 'absolute'; // move out screen.
            this._keyboard.style.top = '-1000px';

            this._keyboard.oninput = () => {
                let value = this._keyboard.value;

                const maxLength = this.options.maxLength;

                if (maxLength && value.length > this.options.maxLength) {
                    value = value.substring(0, maxLength);
                    this._keyboard.value = value;
                }

                this.value = value;

                this.onChange.emit(this.value);
            };
        }
// constructor -- end

private _startEditing(): void {
    this.tick = 0;
    this.editing = true;
    this.placeholder.visible = false;
    this._cursor.alpha = 1;

    if (utils.isMobile.any) {
        this._keyboard.focus();
        this._keyboard.click();
        this._keyboard.value = this.value;
    }

    this.align();
}


private stopEditing(): void {
       // ...
    if (utils.isMobile.any) {
        this._keyboard?.blur();
    }

}

This how I fix it. Thanks for your time.
I'm not check on iOS device yet.

Steps to Reproduce

Create 2 or more input in one time.

Environment

• version: 0.5.8

[dwihp2]

im also experiencing this while creating a PixiComponent using @pixi/react with Input component from this package, is it still not fixed yet in latest version?

[hungluongkong]

@dwihp2 not fixed yet.

[CyberDex]

@hungluongkong, thanks for your effort.

Keep in mind that there was another issue with iPhone, if we are setting the input field alpha to 0, the keyboard will be shown and hidden instantly, so better to avoid setting it but just move it out of the screen.

Also on iOS it needs to create input every time we need to read it, as it will also skip showing the keyboard... Love iOS devs :)

@dwihp2, Doing a release with this fix now, will ping pixi/react devs to update it after my release.