reactjs / react-modal

Accessible modal dialog component for React
http://reactcommunity.org/react-modal
MIT License
7.37k stars 808 forks source link

Allow to define a custom tag for the modal container? #467

Open FezVrasta opened 7 years ago

FezVrasta commented 7 years ago

It would be super handy to be able to define a custom tag for the modal container element. So that I can set it as:

<ReactModal tag="form">

This would make easy to manage modals used as forms.

diasbruno commented 7 years ago

Hi @FezVrasta, yeah, it would be convenient, but maybe it's not a good idea give to react-modal this responsibility. A snippet like this (below) should be "the best" approach:

<Modal ...>
   <MyForm {...props} /> {/* -> <form ....>....</form> */}
</Modal>

This way you can use MyForm on other places.

FezVrasta commented 7 years ago

But then you get the focus on the modal that's different from the form element 🤔 wouldn't this be a problem?

diasbruno commented 7 years ago

@FezVrasta hmm, this is something we need to find a solution. There is onAfterOpen, you can use this callback to move the focus to your component.

Of course, ideas/suggestions are welcome.