Elements getting overlapped in select drop down material ui

Question

I am new to react and am using the select button of material-ui. It adds a highlight text of whatever we give and it should go away once the element is selected.

However on the selection of an option the two texts get blurred like this:

Here is the code for the same:

<Grid item xs={6}>
                <FormControl id="Process" style={{ width: "78%" }} size="small">
                  <InputLabel
                    htmlFor="Process"
                    id="Process"
                    style={{
                      marginLeft: 10,
                      top: "50%",
                      transform: "translate(0,-50%"
                    }}
                  >
                    Process
                  </InputLabel>
                  <Select
                    labelId="Process"
                    name="Process"
                    id="Process"
                    onChange={() => this.setState({ addModalShow: true })}
                    defaultValue={values.Process}
                    variant="outlined"
                    inputProps={{
                      id: "Process"
                    }}
                  >
                    <MenuItem value="1">Implemented</MenuItem>
                    <MenuItem value="2">Implementation in Progress</MenuItem>
                    <MenuItem value="3">Not Implemented</MenuItem>
                  </Select>
                </FormControl>
                <Button
                  variant="outlined"
                  color="primary"
                  onClick={() => this.setState({ addModalShow: true })}
                  size="small"
                  style={styles.button2}
                >
                  +
                </Button>
                <label
                  id="process"
                  style={{ visibility: "hidden", color: "red" }}
                >
                  Process cannot be blank
                </label>
              </Grid>
            </Grid>

Could anyone please tell me why this is happening?

Answer 1

Ciao, your problem is connected to the style you applied on InputLabel. In standard version, InputLabel does not disappears when you select a value on Select component. Will be just moved on top of the Select element.

If you made a style customization on InputLabel, the label will be not moved on top and you will see the two texts blurred. So you have 2 choices:

1. Remove style customization, I mean remove this css:

   style={{
      marginLeft: 10,
      top: "50%",
      transform: "translate(0,-50%"
   }}
   

2. put a condition to InputLabel content. Something like:

   {values.Process === "" && "Process"}
   

In this way, Process label will be visible only if you haven't selected nothing on Select component.

Here a codesandbox example.