[BUG] - Button onPress event flaky in modal

[coratgerl]

NextUI Version

2.6.8

Describe the bug

I have a modal with a button to submit a form inside the modal. On a playwright test the event onPress is not trigger if I don't wait 500 ms before click on button. This work with onClick event. There is no state update on my side that can flaky my code. My test also check that my button is enabled before click and this step works.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Not sure how to reproduce because it is very specific on this modal, but my modal look like this :

 <Modal
    isOpen={isOpen}
    onOpenChange={(open) => {
      if (!open) onClose()
    }}
  >
    <ModalContent>
      {(onClose) => (
        <>
          <ModalHeader className="flex flex-col gap-1">
            Create
          </ModalHeader>

          <ModalBody>
              <Input
                name="maxRedemptions"
                onBlur={form.handleBlur}
                onChange={form.handleChange}
                type="text"
                variant="faded"
                label="Max usages"
                errorMessage={form.errors.maxRedemptions}
                value={form.values.maxRedemptions}
                isInvalid={
                  form.dirty &&
                  form.touched.maxRedemptions &&
                  !!form.errors.maxRedemptions
                }
              />
          </ModalBody>

          <ModalFooter>
            <Button
              color="default"
              variant="light"
              onPress={onClose}
              className="Cancel"
            >
              Cancel
            </Button>

            <Button
              // OnPress is flaky here
              onPress={() => {
                   console.log("onPress") // Never display on click
                   return form.handleSubmit()
              }}
              isDisabled={!form.isValid}
              isLoading={form.isSubmitting}
              className="SubmitCreatePromotion"
            >
              Create
            </Button>
          </ModalFooter>
        </>
      )}
    </ModalContent>
  </Modal>

Expected behavior

The onPress is call

Screenshots or Videos

No response

Operating System Version

macOS

Browser

Chrome

[linear]

ENG-1799 [BUG] - Button onPress event flaky in modal

[AnYiEE]

Because of this issue, as well as another problem I encountered in a newer version, I fixed the version used in my production environment to 2.6.5. Apart from a minor issue with the Popover-based animation, I haven't received any other error reports.

In version 2.6.5, I can use onClick. I'm not that focused on accessibility; instead, I prefer the elements on the page to respond correctly to most people's interactions.

Also report in #4322 (comment) .

[coratgerl]

With the latest version and the deprecation in more components, I have a lot of test that not pass now with onPress. Mainly on submit button in modal.

[Peterl561]

Please provide a minimal sandbox for your modal setup with the flaky test result.

[keul]

@coratgerl not 100% sure is the same issue, but I identified a very similar problem using Button inside forms after migrating to 2.6.10 (also tested 2.6.11).

Here a reproducible example: https://codesandbox.io/p/sandbox/qzmwk4?file=%2Fsrc%2FApp.tsx

Using the Button with onPress makes the form to be submitted

[coratgerl]

I am not sure that is the same issue, because in my case the form is never submitted, but interesting ! I try to create a minimal sandbox but it is hard because I have a complex environnement for my tests.