[BUG] - When using the Button component on mobile devices, the first onPress event is ignored

jongpcb commented 4 months ago

NextUI Version

2.4.1

Describe the bug

Situation

I am developing a chat application.
The app has a simple form consisting of only a Textarea and a Button component.
After entering content and pressing the button, the keyboard disappears, and nothing happens.
The onPress event only works when the button is clicked again after the keyboard is closed.

My Code

 const sendBtn = (
     <Button color="danger" isIconOnly type="submit" onPress={() => {alert("onPress")}}>
          <PaperAirplaneIcon className="h-5 w-5"></PaperAirplaneIcon>
     </Button>
 );

 <form className="p-4" onSubmit={handleSubmit}>
      <Textarea
          endContent={sendBtn}
          label="AI-Powered"
          minRows={2}
          placeholder="Enter your chat here"
          size="lg"
      />
 </form>

Demonstration video of the problem

※ Please find attached the file.

Environment Versions

OS : Android 14
Browser : Samsung Internet 25.0.1.3
Next.js : 14.2.3
React : 18.3.1
@nextui-org/react : 2.4.1

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

N/A

Expected behavior

The onPress event should work even on the first button click.

Operating System Version

Android

Browser

Other (add additonal context)

linear[bot] commented 4 months ago

ENG-989 [BUG] - When using the Button component on mobile devices, the first onPress event is ignored

jongpcb commented 4 months ago

onPress Event Error.webm

jongpcb commented 4 months ago

Related issues

kanstantsinkamazennikau commented 3 months ago

I confirm that the problem is also present in my app. which makes using it somewhat unpleasant from the user's point of view. when trying to click on a button and submit a form from a mobile device, if the focus was on an input, first the on-screen keyboard disappears and only then when you click on the button again does it work. NextUI 2.4.2

jongpcb commented 3 months ago

@kanstantsinkamazennikau

I made some modifications to the code and discovered a new phenomenon. If the button is pressed quickly, it works correctly. You need to press and release it very quickly...

Please refer to the video.

https://github.com/user-attachments/assets/723dfea8-e24d-4bcb-bf3f-72e762ed594e

Changed code

function handleSubmit() {
    // submit logic
    // alert("onSubmit");
}

 const sendBtn = (
     <Button color="danger" isIconOnly type="submit">
          <PaperAirplaneIcon className="h-5 w-5"></PaperAirplaneIcon>
     </Button>
 );

 <form className="p-4" onSubmit={handleSubmit}>
      <Textarea
          endContent={sendBtn}
          label="AI-Powered"
          minRows={2}
          placeholder="Enter your chat here"
          size="lg"
      />
 </form>

LandonPattison commented 3 months ago

Experiencing the same issue where we have the button in the ModalFooter the first press will not trigger the handleApplyNow function neither will changing to onClick. Have tried disabling animation on both the modal and button, can't seem to get it work.

<Modal isOpen={isOpen} onOpenChange={onOpenChange}>
        <ModalContent>
          {(onClose) => (
            <>
            <ModalHeader className="flex flex-col gap-1 font-medium"></ModalHeader>
              <ModalBody className="flex flex-col items-center text-center">
              </ModalBody>
              <ModalFooter>
                <div className="flex px-8 justify-between w-full gap-4">
                  <Button color="primary" className="w-full" onPress={() => handleApplyNow()}>
                    Join Now
                  </Button>
                </div>
              </ModalFooter>
            </>
          )}
        </ModalContent>
      </Modal>

gar1t commented 3 months ago

I'm observing a similar behavior (v2.4.6)

In my case, the issue is related to animation/motion. If I disable animation for the modal, I don't see the problem.

Digging in a little deeper, the issue appears to kick in when the screen size drops below a threshold. For the default motion config, that width appears to be 640px. E.g. in Chrome under the responsive setting for the device toolbar, the modal does not open when the width is 639 but it does open when it's 640.

I'm using the basic example from the docs.

Again, disabling animation with disableAnimation fixes the behavior.

For the default modal animation, the behavior can be fixed by setting the --slide-exit CSS variable. The value defaults to 80px for small screens (under 640px). When this value is set to 0px using the class [--slide-exit:0px] the is fixed.

  <Modal
    ...
    classNames={{
       wrapper: "[--slide-exit:0px]",
    }}
  >

If I use different motions for the modal, I can reintroduce the issue even when --slide-exit is 0px. The related topic is the x value on the exit property for variants. In playing around with motion, when this issue is occurring, the modal tries to appear (via motion) and then closes. E.g. in some cases I'll see the modal slide into view partially and then close.

This all goes away when animation is disabled. It seems to go away when --slide-exit CSS var is the right value for the motion config variants.exit.x value.

I don't fully understand the underlying mechanics - I'm just describing what I'm seeing. Hopefully someone who knows what they're doing can spot the root cause!

BidyasagarAnupam commented 2 days ago

@gar1t Yes, this code resolves my issue. Thank you 🙏🏻

nextui-org / nextui