Como Adicionar Focus nos Inputs ao precionar setas direcionais e TAB

26 set 2022

Marcos Vini

1 min

* editado em 26 set 2022, às 21:12

{

field: 'remanejar',

headerName: 'Rem Cx',

width: '75',

editable: false,

align: 'center',

renderCell: (params) => {

return (

// aqui

defaultValue={params.row.remanejar}

// colorValor

type="number"

name="campo"

style={{

width: '74px',

height: '100%',

textAlign: 'center',

border: '1px solid #b1a3a3',

color: colorInput(params.row),

}}

id={params.row.id + 'input_caixa'}

onKeyDown={(e) => {

// ao pressionar Enter enviar e ao pressionar a

// seta para baixo ir para a proxima

if (['Enter', 'ArrowDown'].includes(e.key)) {

let inputs = document.querySelectorAll('input')

inputs = Array.from(inputs)

const indexInput = inputs.indexOf(

document.getElementById(e.target.id),

)

const next = inputs[indexInput + 2]

next.focus()

}