primereact icon indicating copy to clipboard operation
primereact copied to clipboard

Sidebar: forms can't be submitted in the presence of non-modal Sidebars

Open inad9300 opened this issue 3 years ago • 1 comments

Describe the bug

Likely related to https://github.com/primefaces/primereact/issues/2562

Reproducer

https://codesandbox.io/s/primereact-test-forked-ghjz97?file=/src/index.js

PrimeReact version

8.6.0

React version

18.x

Language

ALL

Build / Runtime

Create React App (CRA)

Browser(s)

No response

Steps to reproduce the behavior

  1. Click "Submit"
  2. Verify that no message is logged, i.e. submission doesn't work
  3. Comment out <Sidebar /> element
  4. Verify that a message is logged, i.e. submission works

Expected behavior

No response

inad9300 avatar Sep 23 '22 09:09 inad9300

I agree it looks like when modal={false} the mask is still filling the screen and intercepting clicks.

melloware avatar Sep 23 '22 10:09 melloware

Seems to be linked to the following: https://forum.primefaces.org/viewtopic.php?f=57&t=74993

Basically, if you put any input type file (or FileUpload) in the page when there is a sidebar, the behavior of the input file will be completely blocked. (with or without form attached to it) You can test it here: https://codesandbox.io/s/withered-water ... oadDemo.js](https://codesandbox.io/s/withered-waterfall-cs307o?file=/src/demo/FileUploadDemo.js

Not sure, if I need to open a different bug request for this or shall we attach it to this one?

atrhacker avatar Jan 18 '23 09:01 atrhacker

I think this one is fine it's most likely the same issue

melloware avatar Jan 18 '23 09:01 melloware

Would there be any temporary solutions ? even I fork the code.. This is the only item which forbid me from migrating to v8. I'm surprised that it's not affecting the official documentation webpage as it also contain a side bar?

atrhacker avatar Mar 15 '23 13:03 atrhacker

@atrhacker I just encountered this problem too you can add dismissable={false}

<Sidebar visible={true} modal={false} dismissable={false} onHide={() => setVisible(false)} />

kl-nevermore avatar Jan 04 '24 09:01 kl-nevermore