How do I layout forms in MaterialUI?

Question

I'm trying to structure the following form layout using MaterialUI Grid components and fields:

+-----------------------------------------+
|Form                                     |
|                                         |
| +--------------+ +----------------+     |
| |Field_1       | |Field_2         |     |
| +--------------+ +----------------+     |
| +--------------+ +---------+ +--------+ |
| |TextArea      | |Popup_A1 | |Popup_A2| |
| |              | +---------+ +--------+ |
| |              | +---------+ +--------+ |
| |              | |Popup_B1 | |Popup_B2| |
| |              | +---------+ +--------+ |
| |              | +---------+ +--------+ |
| |              | |Popup_C1 | |Popup_C2| |
| |              | +---------+ +--------+ |
| |              |                        |
| +--------------+                        |
+-----------------------------------------+

My understanding may be a bit wonky, and the Popups are showing up as minimal squares. The page structure looks like this (simplified):

<Form>
  <Grid container direction="row" justify="flex-start" alignItems="flex-start" spacing={1}>
    <Grid container xs="12" spacing="1">
      <Grid item xs={12} sm={6}>
        <Field name="Field1" ... fullWidth />
      </Grid>
      <Grid item xs={12} sm={6}>
        <Field name="Field2" ... fullWidth />
      </Grid>
    </Grid>
    <Grid container xs={12} >
      <Grid container xs={4} sm={4} >
        <Field  fullWidth multiline component={TextField} />
      </Grid>

      <Grid container xs={8} sm={8}>
        <Grid container >
          <Grid item>
            <TextField name="Popup_A1" fullWidth select>
              <MenuItem key="1" value="1">
                Large Text
              </MenuItem>
              <MenuItem key="2" value="2">
                Ooh Some Large Text
              </MenuItem>
              <MenuItem key="3" value="3">
                Another Large Text Choice
              </MenuItem>
              <MenuItem key="4" value="4">
                No, LOOOONG Text
              </MenuItem>
            </TextField>
          </Grid>
          <Grid item>
            <TextField name="Popup_A2" fullWidth select>
              <MenuItem key="1" value="1">
                Large Text
              </MenuItem>
              <MenuItem key="2" value="2">
                Ooh Some Large Text
              </MenuItem>
              <MenuItem key="3" value="3">
                Another Large Text Choice
              </MenuItem>
              <MenuItem key="4" value="4">
                No, LOOOONG Text
              </MenuItem>
            </TextField>
          </Grid>
        </Grid>
      </Grid>

      <Grid container xs={8} sm={8}>
        <Grid container >
          <Grid item>
            <Field name="Popup_B1" ... fullWidth select >....</Field>
          </Grid>
          <Grid item>
            <Field name="Popup_B2" ... fullWidth select >....</Field>
          </Grid>
        </Grid>
      </Grid>

      ...

    </Grid>
 </Grid>
</Form>

Can someone put me out of my misery and let me know what I'm doing wrong, or possibly point me at a resource for structuring forms like this?

---

Edit

I've added in the MenuItem elements to Venkovsky very helpful code sandbox... and it illustrates exactly what I mean. The pop-ups are very, very narrow. :-(

Answer 1

Just in case anyone else has a similar issue, here's the basics of the code that worked. I think that the issue was wrapping the fields in <Grid item sm={6}>'s:

<Form>
  <Grid container direction="row" justify="flex-start" alignItems="flex-start" spacing={1}>
    <Grid container spacing={1}>
      <Grid item sm={6}>
        <Field name="requestor" ... />
      </Grid>
      <Grid item sm={6}>
        <Field name="status" .../>
      </Grid>
    </Grid>
    <Grid container >
      <Grid item sm={3}>
        <Field name="materials" type="text" label="Materials" variant="outlined" rowsMax={10} rows={20} margin="normal" fullWidth multiline  ... />
      </Grid>
      <Grid item sm={1}>
      </Grid>
      <Grid item sm={8}>
        <Grid container spacing={1}>
          <Grid item sm={6}>
            <TextField name="reviewer_2" ... />
          </Grid>
          <Grid item sm={6}>
            <TextField name="approver_1" ... />
          </Grid>
        </Grid>
        <Grid container spacing={1}>
          <Grid item sm={6}>
            <TextField name="reviewer_2" ... />
          </Grid>
          <Grid item sm={6}>
          <TextField name="approver_2" ... />
          </Grid>
        </Grid>
        <Grid container spacing={1}>
          <Grid item sm={6}>
            <TextField name="reviewer_3" ... />
          </Grid>
          <Grid item sm={6}>
            <TextField name="approver_3" ... />
          </Grid>
        </Grid>
      </Grid>
    </Grid>
    <Button type="submit" > Submit </Button>
  </Grid>
</Form>

Answer 2

I have created a working codesandbox for you.

Here is the code.

function App() {
  return (
    <Form>
      <Grid
        container
        direction="row"
        justify="flex-start"
        alignItems="flex-start"
        spacing={1}
      >
        Form
        <Grid container xs="12" spacing="1">
          <Grid item>
            <TextField name="Field1" value="Field1" />
          </Grid>
          <Grid item>
            <TextField name="Field2" value="Field2" />
          </Grid>
        </Grid>
        <Grid container xs={12}>
          <Grid item xs={4} sm={4}>
            <TextField
              fullWidth
              multiline
              value="Field1"
              label="Multiline"
              rows="6"
              defaultValue="Default Value"
            />
          </Grid>
          <Grid item xs={8} sm={8}>
            <Grid container>
              <Grid item>
                <TextField name="Popup_A1" fullWidth select />
              </Grid>
              <Grid item>
                <TextField name="Popup_A2" fullWidth select />
              </Grid>
            </Grid>
            <Grid container>
              <Grid item>
                <TextField name="Popup_A1" fullWidth select />
              </Grid>
              <Grid item>
                <TextField name="Popup_A2" fullWidth select />
              </Grid>
            </Grid>
            <Grid container>
              <Grid item>
                <TextField name="Popup_A1" fullWidth select />
              </Grid>
              <Grid item>
                <TextField name="Popup_A2" fullWidth select />
              </Grid>
            </Grid>
          </Grid>
        </Grid>
      </Grid>
    </Form>
  );
}