fullWidth not working on <Select>

[zys]

The component <Select /> does not support the property fullwidth from Material UI.

[italoiz]

This is happening because fullWidth property belongs to <FormControl /> component. See the line.

I think we can add a new property to the component like formControlProps. In this case, the <Select /> component is more customizable.

I will make a Pull Request with this improvement.

[zys]

I'm sorry, but this is out of my league. My intention was to use in a way like here. Anyway, I managed to make it work through classes, this way, so this was just a heads-up.

But I did find that the <Select /> component does not work when I try to send data from an api. I'm doing it through the useEffect and useRef methods, however while <TextField /> works fine, <Select /> does not, and, again, this is way out of my league.

[italoiz]

@zys Can you provide examples to reproduce you issue with send data from an API?

[zys]

Sure, here goes:

import React, { useRef, useEffect } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import { TextField, Select } from 'unform-material-ui';
import MenuItem from '@material-ui/core/MenuItem';
import { Form } from '@unform/web';
import { Scope } from '@unform/core';

import api from '../../services/api';

const styles = {
  gridRow: {
    margin: 0,
  },
  fullWidth: {
    width: '100%',
  },
};

const useStyles = makeStyles(styles);

export default function Example(props) {
  const classes = useStyles();
  const formRef = useRef(null);

  useEffect(() => {
    async function fetchData() {
      const dat = (await api.get(`someRoute/${props.match.params.id}`)).data;
      formRef.current.setData(dat);
    }

    fetchData();
  });

  return (
    <Form ref={formRef}>
      <Grid container item spacing={3} xs={12} className={classes.gridRow}>
        <Grid item xs={12} md={6}>
          <TextField name="name" label="Name" fullWidth />;
        </Grid>
        <Scope path="endereco">
          <Grid item xs={12} md={6}>
            <Select
              className={classes.fullWidth}
              name="country"
              label="Country"
            >
              <MenuItem value="br">Brazil</MenuItem>
              <MenuItem value="us">United State</MenuItem>
            </Select>
          </Grid>
        </Scope>
      </Grid>
    </Form>
  );
}

Console outputs this error:
SelectInput.js:301 Material-UI: you have provided an out-of-range value undefined for the select (name="country") component.
Consider providing a value that matches one of the available options or ''.
The available values are Brazil, United States.

This happens even with the correct value being sent, regardless of "Brazil" or "United States".

Since we are at this, the label of the <TextField /> stays overlapping the value that comes from the api.

[italoiz]

@zys I made fast tests to reproduce your error with setData programmatically. it seems to be a real bug. But in this issue, we have two different issues. Can you open a new issue reporting this the new error?

[zys]

I'll open two new ones, because neither has relation with the title of this issue. Ok?

[naldo-88]

Olá bom dia,

Eu resolvi usando style={{ width: '100%' }}