Blur input inside a modal

[kai2703]

How to trigger onCursorOut inside a modal with a cover

    const dialog: Dialog = this.rexUI.add
      .dialog({
        x: this.game.scale.width / 2,
        y: this.game.scale.height / 2,
        content: this.rexUI.add
          .sizer({
            width: 300,
            height: 350,
            orientation: 'y',
          })
          .add(
            this.rexUI.add
              .canvasInput(0, 0, 100, 20, {
                background: {
                  stroke: '#fff'
                },
                padding: 5,
                style: {
                  fontFamily: '"Press Start 2P"',
                  fontSize: 12
                },
                maxLength: 5,
                minLength: 1,
                onCursorOut(child) {
                  child.modifyStyle({
                    color: 'white',
                    backgroundColor: null
                  })
                },
                onCursorIn(child) {
                  child.modifyStyle({
                    color: 'black',
                    backgroundColor: 'white'
                  })
                }
              })
              .setNumberInput()
          )
      })
      .layout()

    dialog.modal({ touchOutsideClose: true })

[rexrainbow]

Modal behavior creates a cover to block all touch inputs, therefore it also blocks canvasInput's clickOutSide detecting, will try to find another way to solve this bug.

[rexrainbow]

BTW, since touchOutsideClose is true, means that clicking outside of dialog will close modal dialog, it will also close canvasInput too.

[kai2703]

I have a form inside the modal, I want to blur the input which will trigger the virtual keyboard to close on mobile. BTW, your lib helps me a lot when I get started with phaser, thank you

[rexrainbow]

I had added a new parameter clickOutSideTarget, see this test case, line 57. Turn on/off it to test the blur behavior. Turn on this parameter will create a game object for clickOutSide detecting, below CanvasInput, but above cover of modal, therefore CanvasInput can receive blur. Note that touchOutsideClose parameter (line 67) is disabled here.

[kai2703]

thank you, it worked