Modal Portals

Modals are a core part of our UI, but we ran into a bit of an issue right at the end of the project and realized there is a better way to work with them. This page discusses how modals might be changed by future teams.

• Author: Alex Wilkes <adw4236@rit.edu>

Modal Portals

Modals are a common problem in UX and common problems often tend towards a standard solution. For modals (any pop-ups really) in react, that solution is portals.

The problem we faced is that our current modals (pop-up dialogs like create skill) use forms, but so do the components that they are a child of. This results in a form being nested inside another form and pressing submit on one will submit the other as well. This isn't an issue with using forms in modals but rather an issue with where modals were rendering.

As a note, we did a temporary fix for this that involved preventing the default form submission, if this solution is adopted, that fix should be reverted as well. See #160 as well.

React portals allow a component to render their HTML into a different part of the HTML DOM hierarchy than as a child to their parent as they normally would. The fix to this would be incredibly easy although we did not implement this due to our realization being so close to the end of the semester.

1. In the /client/public/index.html template, a secondary root would be added with the id modals
2. #modals would need to by styled (i.e. in /client/src/index.css) to be fixed position covering the entire page
3. All modals would instead of returning their plain react component, would return

   ReactDOM.createPortal((
       // Component that was returned before goes here
   ), document.getElementById("modals"));

   It may even be relevant to create a new component that returns this and have that component wrap all modals instead.