Custom data attribute not working with MUI 5 using textfield select prop

user_14786327 0
Viewed 485

Previously i was using material Ui V4 using the Textfield select prop and was able to retrieve my custom data attribute via event.currentTarget.dataset. However, now im using MUI v5 it logs out null in my onchange handler.

Anyone else experienced this? Any help would be much appreciated.

        const handleChange = (e) => {
        /** ID FROM INPUT FIELD */
        console.log(e.currentTarget.dataset); ---> logs out null

        <Grid item>
         <TextField
           select
           name='rpe'
           inputProps={{
            'data-setid': `${localSetId.current}`,
            'data-exerciseid': `${localExerciseId.current}`
           }}
           style={isMatched ? { width: 69 } : { minWidth: 200 }}
           variant='outlined'
           size={isMatched ? 'small' : 'medium'}
           label='rpe'
           onChange={handleChange}
           defaultValue=''
         >
          {rpeList.map((option) => (
            <MenuItem key={option.value} value={option.value}>
              {option.label}
            </MenuItem>
          ))}
       </TextField>
      </Grid>
mui5 reactjs custom-attribute
1 Answers

I don't think the MUI select functionality supports data-attributes, but an alternative solution is to pass an object as a second argument for the handleChange function

const handleChange = (e, dataset) => {
        /** ID FROM INPUT FIELD */
        console.log(e, dataset); // now it will print both event and the new data object
}
        <Grid item>
         <TextField
           select
           name='rpe'
           style={isMatched ? { width: 69 } : { minWidth: 200 }}
           variant='outlined'
           size={isMatched ? 'small' : 'medium'}
           label='rpe'
           onChange={(e) => handleChange(e, {setId:1, exerciseId: 2})}
           defaultValue=''
         >
          {rpeList.map((option) => (
            <MenuItem key={option.value} value={option.value}>
              {option.label}
            </MenuItem>
          ))}
       </TextField>
      </Grid>
user_87732720
Related