Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

240
Visualizações
Getting the name property of the TextField (as a Select Box) Material-UI via the event object from the onFocus prop

I've been using the "@material-ui/core": "4.11.2" package with "react": "16.8.6". In the TextField component when the select prop is true, I can't get the name property of the TextField from the event object in handleFocus function.

<TextField
        id="standard-select-currency"
        name="mySelectBox"
        select
        label="Select"
        value={currency}
        onChange={handleChange}
        onFocus={handleFocus}
        helperText="Please select your currency"
      >
        {currencies.map((option) => (
          <MenuItem key={option.value} value={option.value}>
            {option.label}
          </MenuItem>
        ))}
</TextField>

Here is handleFocus and handleChange functions.

  const handleChange = (event) => {
    console.log(
      "event.target ==>",
      event.target,
      "event.target.name ==>", // mySelectBox
      event.target.name
    );
  };

  const handleFocus = (event) => {
    console.log(
      "event.target ==>",
      event.target,
      "event.target.name ==>", // undefined
      event.target.name
    );
  };

I create a complete example in this sandbox.

over 4 years ago · Santiago Trujillo
3 Respostas
Responde à pergunta

0

I checked with some console logging and noticed that the name property is not an attribute of the event.target. The event.target you have logged displays

<div class="MuiSelect-root MuiSelect-select MuiSelect-selectMenu MuiInputBase-input MuiInput-input" tabindex="0" role="button" aria-haspopup="listbox" aria-labelledby="standard-select-currency-label standard-select-currency" id="standard-select-currency">$</div>

which has attributes class, tabindex, role, aria-haspopup, aria-labelledby, and id

but the sibling of your target which is accessed by event.target.nextSibling is

<input name="mySelectBox" aria-hidden="true" tabindex="-1" class="MuiSelect-nativeInput" aria-describedby="standard-select-currency-helper-text" value="USD"></input>

or

<input name="mySelectBox" aria-hidden="true" tabindex="-1" class="MuiSelect-nativeInput" aria-describedby="standard-select-currency-helper-text" value="EUR"></input>

depending on which currency you select has attributes name,aria-hidden,tabindex,class,aria-describedby and value

then you can access the name attribute inside the handleFocus as event.target.nextSibling.getAttribute('name') or event.target.nextSibling.name

codesandbox demo

over 4 years ago · Santiago Trujillo Relatório

0

The Texfield does not directly pass the onFocus to the input. From MUI,

The ref is forwarded to the root element.

Any other props supplied will be provided to the root element (FormControl).

The onFocus is passed to the FormControl element, which is a div, not an input, and doesn't have a name. You can use the NativeSelect or pass the onFocus property to the input props, which didn't play out very well when I tried in the sandbox you provided.

The quickest solution for this is to pass a ref to the input, and on focus, get the name from the reference. This is what your code will look like then.

export default function MultilineTextFields() {
  const [currency, setCurrency] = React.useState("EUR");
  const inputRef = React.useRef()

  const handleChange = (event) => {
    setCurrency(event.target.value);
    console.log(
      "event.target ==>",
      event.target,
      "event.target.name ==>",
      event.target.name
    );
  };

  const handleFocus = (event) => {
    console.log(
      "event.target ==>",
      inputRef,
      "event.target.name ==>",
      inputRef.current.node.name
    );
  };

  return (
    <form noValidate autoComplete="off">
      <TextField
      inputRef= {inputRef}
        id="standard-select-currency"
        name="mySelectBox"
        select
        label="Select"
        value={currency}
        onChange={handleChange}
        onFocus={handleFocus}
        helperText="Please select your currency"
      >
        {currencies.map((option) => (
          <MenuItem key={option.value} value={option.value}>
            {option.label}
          </MenuItem>
        ))}
      </TextField>
    </form>
  );
}

Here is the sandbox I used https://codesandbox.io/s/material-demo-forked-zjlz3?file=/demo.js

over 4 years ago · Santiago Trujillo Relatório

0

You can pass a SelectProps to the TextField and use <option> tag instead of <MenuItem> component as I am saying below:

<TextField
        id="standard-select-currency"
        name="mySelectBox"
        select
        label="Select"
        value={currency}
        onChange={handleChange}
        onFocus={handleFocus}
        helperText="Please select your currency"
        SelectProps={{ native: true }} // ************
      >
        {currencies.map((option) => (
          <option key={option.value} value={option.value}>
            {option.label}
          </option>
        ))}
</TextField>

I modified your sandbox.

over 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda