Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Click events do not work correct within the collapsible #233

Open
mikeknerr opened this issue Aug 23, 2022 · 0 comments
Open

Click events do not work correct within the collapsible #233

mikeknerr opened this issue Aug 23, 2022 · 0 comments

Comments

@mikeknerr
Copy link

Describe the bug
There are two discrete cases where click events within a collapsible do not work correct -- one with a workaround and one without.

  1. Integration testing (e.g. Cypress): Even when the Collapsible is expanded, Cypress sees elements that are children of the Collapsible as hidden, so click events do not work without indicating { force: true }. Although this can be annoying, there is a workaround for it.

  2. Mobile uploads on PWAs: As far as I can tell, this has no workaround. In my app, we use Collapsible to collapse entire sections of content -- in this case the user profile. You can see this here:

    <Collapsible
          open={showInfo}
          triggerStyle={triggerStyle}
          trigger={
            <CollapsibleHeader
              onClick={handleShowInfo}
              open={showInfo}
              title="Basic Information"
              children={
                <InformationContainer>
                  <ProfileForm card={card} />
                </InformationContainer>
              }
            />
          }
        />

Inside of <ProfileForm> there is the ability to change one's avatar. On web, this launches a modal, and on mobile it launches a MaterialUI <Dialog>. Within the modal/dialog there is an <input> with type="file" that should launch the file browser. On web, this works just fine. On mobile it does not. Clicking the button does not launch anything. At first I thought it had something to do with the input on mobile, but when I moved the input outside of the Collapsible, immediately it began working.

TLDR: The Collapsible appears not to allow the propagation of clicks to child elements.

To Reproduce
Steps to reproduce the behavior:

React Collapsible JSFiddle Template

  1. Create a simple Collapsible with a basic <input type="file" /> inside.
  2. Open your fiddle or app on your mobile browser (I tested on iOS/Safari and iOS/Chrome) and attempt to click the "Choose File" button,
  3. Nothing happens
  4. Move the input outside of the Collapsible
  5. Magic! It works

Expected behavior
Clicking an input from within the Collapsible on mobile should bring up the file selector.

Additional context
Tested on iPhone/iOS with both Safari and Chrome. Tested on Firefox/Chrome web emulators as well.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant