Aos fatos
Para esclarecer, vamos entender o motivo de você estar recebendo esta mensagem antes de entrarmos no porquê.
Essa mensagem é dada pelo React e não pelo Material-UI. Precisamos entender é que o React sempre trabalha com componentes controlados ou não-controlados. Sendo componentes controlados o recomendado. Aqui segue uma palhinha da documentação.
Quando o componente é controlado o estado que define a seleção é pela propriedade value. Assim sendo o React não espera que um elemento <option>
, onde seu elemento pai é controlado, esteja marcado com o atributo selected.
Ou seja códigos assim irão cair nessa mensagem e o atributo selected será ignorado:
<select onChange={handleChange} value={values.filial}>
<option value="DEFAULT" disabled>Choose a salutation ...</option>
<option selected value={10}>Ten</option>
<option value={20}>Twenty</option>
<option value={30}>Thirty</option>
</select>
<ul onChange={handleChange} value={values.filial}>
<option value="DEFAULT" disabled>Choose a salutation ...</option>
<option selected value={10}>Ten</option>
<option value={20}>Twenty</option>
<option value={30}>Thirty</option>
</ul>
Mas então porque estou recebendo esta mensagem no <Select>
do Material-UI se eu não estou colocando selected no elemento <option>
?
O que esta ocorrendo é que o Select do Material-UI (reforçando, não é o elemento nativo <select>
), quando controlado por uma propriedade value e não marcado com a propriedade native, espera que suas opções sejam elementos <MenuItem>
e não <option>
.
O Select do Material-UI irá renderizar as opções em um menu suspenso encaminhando a
a propriedade select para o elemento <MenuItem>
que está selecionado(apenas indicando para aplicar estilos CSS de elemento selecionado).
<MenuItem selected value={10}>Ten</MenuItem>
Renderizando então em:
<li value={10}>Ten</li>
Note que ao renderizar a propriedade selected não estará presente.
A renderização final com Material-UI ficará assim:
<ul onChange={handleChange} value={values.filial}>
<li value="DEFAULT" disabled>Choose a salutation ...</li>
<li value={10}>Ten</li> //Renderiza com os estilos de CSS de um elemento selecionado
<li value={20}>Twenty</li>
<li value={30}>Thirty</li>
</ul>
Note que o componente <MenuItem>
é transformado em elemento <li>
filho de um elemento <ul>
.
Quando se utiliza o elemento <option>
o Material-UI irá fazer o mesmo processo, porém ao identificar o item que está selecionado, ele irá encaminhar a mesma propriedade select para o elemento que colocarmos, nesse caso <option>
.
<option selected value={10}>Ten</option>
No processo de renderização do React, ele irá detectar um elemento controlado marcado com selected, caindo assim no cenário onde temos um elemento option com o atributo selected, gerando a mensagem citada.
Então:
Ao usar o Select
do Material-UI, sempre não sendo marcado com a propriedade native, use <MenuItem>
para suas opções. Caso contrário pode utilizar normalmente o elemento <option>
.
Outra dica com relação ao uso dos compontentes React, caso você use um componente controlado, evite o uso da propriedade defaultValue, use o value para controlar, instanciando seu componente com a opção default no valor de value.
const [filial, setFilial] = React.useState("DEFAULT")
Isso ajuda a evitar alguns warnings.
handleChange
?