glennflanagan / react-collapsible

React component to wrap content in Collapsible element with trigger to open and close.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Click events do not work correct within the collapsible

mikeknerr opened this issue · comments

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.