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.
-
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. -
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
- Create a simple Collapsible with a basic
<input type="file" />
inside. - 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,
- Nothing happens
- Move the input outside of the Collapsible
- 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.