You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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:
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.
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:
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>
withtype="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
<input type="file" />
inside.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.
The text was updated successfully, but these errors were encountered: